상세 컨텐츠

본문 제목

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

IT/응용

by SINAFLA 2021. 6. 24. 13:00

본문

반응형
앱을 만들 경우에 탭 메뉴를 만들어서 상위의 메뉴 버튼을 클릭하면 하위의 본문만 바뀌어야 하는 경우가 있다. 휴대폰 어플에서는 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 해주면 된다.
 
 
 
반응형

관련글 더보기

댓글 영역