[Flutter] 탭 메뉴(Tab Menu) 만들기

앱을 만들 경우에 탭 메뉴를 만들어서 상위의 메뉴 버튼을 클릭하면 하위의 본문만 바뀌어야 하는 경우가 있다. 휴대폰 어플에서는 Scaffold에 Tab 메뉴가 존재한다. 하지만 상위의 탭 메뉴가 아닌 중간 부분이나 자신이 원하는 위치에 탭 메뉴를 만들고자 하면 아래와 같이 작성한다.

 

 

화면 결과물은 위의 그림과 같다. 하지만 내가 사용한 방법은 동적으로 탭 메뉴를 만들고, 버튼을 클릭시 하단만 변경이 되도록 만들었다.

 

탭 메뉴를 가지는 소스는 아래와 같다.

 

Container(

                width: 365,

                height: 290,

                child: Column(

                  children: <Widget>[

                    Row(

                      children: tabItem,

                    ),

                    tabMain(

                        code: code),

                  ],

                ),

              ),

 

 

탭 화면을 만들 몸퉁이다. Container로 선언 후 자식으로 Column으로 메뉴 탭과 메인 화면으로 나눈다. 그리고 메뉴 탭은 동적으로 만들어 주기 때문에 List<Widget> 변수 tabItem 선언 후 동적으로 메뉴 위젯이 추가된다.

 

Widget tabItem(String tabTitle, int _color, String _code) {

    String tabCode = _code;

 

    return GestureDetector(

      child: Row(

        mainAxisAlignment: MainAxisAlignment.start,

        children: <Widget>[

          Container(

            width: 80,

            height: 30,

            decoration: BoxDecoration(

              borderRadius: BorderRadius.vertical(top: Radius.circular(5)),

              border: Border.all(color: Color(_color), width: 2),

              color: Color(_color),

            ),

            child: Text("$tabTitle",

                style: const TextStyle(

                    color: const Color(0xffffffff),

                    fontWeight: FontWeight.w400,

                    fontFamily: "NanumSquareEB",

                    fontStyle: FontStyle.normal,

                    fontSize: 16.0),

                textAlign: TextAlign.center),

          ),

        ],

      ),

      onTap: () {

        setState(() {

          code = tabCode;

        });

      },

    );

  }

 

 

위의 소스는 동적으로 추가되는 탭 메뉴의 함수다. 버튼을 클릭을 했을 때 이벤트가 발생되도록 GestureDetector() 함수를 제일 상위에 두고, 아래로 버튼 영역과 탭 메뉴의 제목을 넣을 위젯을 추가한다.

 

 

void initState() {

    String _code = widget.data['code'];

    codeList = _code.split(',');

 

    codeList.forEach((element) {

      int _color = 0;

      String _title = '';

 

      if(code == '') {

        code = element;

      }

 

      if(element == '01') {

        _color = 0xffD9001B;

        _title = '탭메뉴1';

      } else if(element == '02') {

        _color = 0xffffff00;

        _title = '탭메뉴2';

      } else if(element == '03') {

        _color = 0xfff59a23;

        _title = '탭메뉴3';

      } else if(element == '04') {

        _color = 0xffc280ff;

        _title = '탭메뉴4';

      }

 

      symtomItem.add(tabItem(_title, _color, element));

    });

    super.initState();

  }

 

 

탭 메뉴를 아이템을 초기화를 initState()에서 값을 처음에 받을 때 추가해준다. if의 element 구분 부분은 개발자의 필요 부분에 따라 수정 및 삭제하면 된다.

tabMain()은 클래스로 탭 메뉴의 아이템 값에 따라서 Widget 화면을 호출할 수 있게 조건문을 걸어서 widget을 return 해주면 된다.