[Flutter] VerticalDivider 사용 예제

오늘은 실무에서 사용이 많이 되는 VerticalDivider 예제를 가지고 설명을 해볼려고 합니다. 

위의 이미지에 있는 것처럼 중간에 Divider를 넣을 때 사용하는 것입니다. 

참고 URL 

https://api.flutter.dev/flutter/material/VerticalDivider-class.html

VerticalDivider class - material library - Dart API

예제 소스 

Container(
                      height: 20,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          GestureDetector(
                            //회원가입 페이지로 이동
                            // onTapUp: (_) => NavigationManager()
                            //     .push(SignUpPageStep1Agreement.routeName),
                            child: Center(
                              child: AutoSizeText(
                                "이메일찾기",
                                style: Theme.of(context).textTheme.kNormalLoginInputTxt,
                              ),
                            ),
                          ),
                          SizedBox(width: 3,),
                          VerticalDivider(
                            color: Colors.grey,
                            thickness: 0.5,
                          ),
                          SizedBox(width: 3,),
                          .... 중략

위의 소스를 보시면 SizedBox를 이용해서 여백을 주고 VerticalDivider 를 사용해서 화면에 보이는 것처럼 UI를 맞출수 있습니다. 

오늘도 즐거운 Flutter 되세요. ^^