본문 바로가기
Flutter

Flutter.UI Drawer메뉴 꾸미기(유저 정보 및 여러 메뉴페이지 이동)

by 최지철 2023. 1. 7.
728x90
반응형

먼저 최종 결과물이다.

 

drawer: Drawer(
  child: Stack(children: [
    Container(
      color: DarkMode.DarkOn? Color(0xff29323c) :Colors.white,
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            currentAccountPicture: CircleAvatar(
                backgroundImage: KakaoData.Token? NetworkImage('${KakaoData.userImage_URL}') : NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7s_NWoe9O4ONIdRkRBZjASnTMGvQC5ajjtw&usqp=CAU')
            ),
            accountName: KakaoData.Token? Text('${KakaoData.user_name}',
              style: TextStyle(
                color: DarkMode.DarkOn? Colors.black :Colors.white,
              ),
            ) : Text('이름:로그인 후 나타납니다.'),
            accountEmail: KakaoData.Token? Text('${KakaoData.user_email}',
              style: TextStyle(
                color: DarkMode.DarkOn? Colors.black :Colors.white,
              ),
            ) : Text('이메일:로그인 후 나타납니다.'),
            decoration: BoxDecoration(
                color: DarkMode.DarkOn? Colors.pink[400] :Colors.blue[300],
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(30.0),
                    bottomRight: Radius.circular(30.0))),
          ),
          ListTile(
            leading: FaIcon(
              FontAwesomeIcons.houseChimney,
              color: DarkMode.DarkOn? Colors.white:Colors.grey,
            ),
            title: Text(Language.En?'Home':"홈으로"),
            textColor: DarkMode.DarkOn? Colors.white:Colors.black ,
            onTap: (){//메인화면으로 돌아가기
              scaffoldKey.currentState?.closeDrawer();
              if (_menuController.status ==
                  AnimationStatus.dismissed) {
                _menuController.reset();
                _menuController.animateTo(0.6);
              } else {
                _menuController.reverse();
              }
            },
          ),

 

drawer를 먼저 만들어 준 다음 컨테이너를 만든다. 그 다음 리스트뷰를 설정하고 리스트 타일로 각각의 메뉴를 만들어 꾸미면 된다.

또한 

UserAccountsDrawerHeader를 통해 조금 더 그럴싸한 drawer메뉴를 만들 수 있다.

728x90
반응형

'Flutter' 카테고리의 다른 글

Project01[Flutter]오늘 뭐 입지?  (1) 2023.01.07
Flutter. 커스텀으로 다크모드 설정하기  (0) 2023.01.07