flutter - endDrawer로 설정창 그리기

 

 

1️⃣ endDrawer 설정

endDrawer: _drawer(context, uContrl),
endDrawerEnableOpenDragGesture: false,
drawerEnableOpenDragGesture: false,

- 오른쪽에서 창이 열리게 할 것이라 endDrawer을 사용함 (⭐왼쪽에서 나타내고 싶으면 그냥 Drawer을 사용하면 됨!)

- endDrawerEnableOpenDragGesture: false  드래그해서 drawer열기 false

 

 

 

2️⃣ endDrawer 디자인 (widget으로 따로 뺌)

Widget _drawer(BuildContext context, uContrl) {
    return Drawer(
      child: ListView(
        children: [
          Container(
              height: 55,
              decoration: BoxDecoration(color: Colors.white),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 20, top: 2, right: 14),
                    child: SizedBox(
                      width: 12,
                      height: 12,
                      child: IconButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        padding: EdgeInsets.zero,
                        icon: SvgPicture.asset("assets/icon_close.svg",
                            width: 12, height: 12),
                      ),
                    ),
                  ),
                  Text(
                    "설정",
                    style: textTheme(
                            color: kPrimaryColor(), weight: FontWeight.bold)
                        .headline2,
                  )
                ],
              )),
          Container(
            height: 62,
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage('assets/img_banner.png'),
              ),
            ),
          ),
          _buildMenuList(text: "화면", fontColor: kPrimaryColor()),
          _buildMenuList(text: "알림", fontColor: kPrimaryColor()),
          _buildMenuList(text: "구독/결제", fontColor: kPrimaryColor()),
          _buildMenuList(text: "친구초대", fontColor: kPrimaryColor()),
          _buildMenuList(text: "비밀번호 변경", fontColor: kPrimaryColor()),
          _buildMenuList(text: "고객센터", fontColor: kPrimaryColor()),
          _buildMenuList(text: "버전", fontColor: kPrimaryColor()),
          _buildMenuList(
              text: "로그아웃", fontColor: kchacholGreyColor(), uContrl: uContrl),
        ],
      ),
    );
  }

 

① ListView의 ListTile을 사용함

ListTile _buildMenuList(
      {required String text,
      Color? fontColor,
      FontWeight? fontWeight,
      uContrl}) {
    return ListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 20),
      title: Text(text,
          style: textTheme(color: fontColor, weight: fontWeight).headline3),
      trailing: text != "로그아웃"
          ? SvgPicture.asset("assets/icon_arrow_next.svg", width: 8)
          : null,
      onTap: () {
        _ifPasswordMenu(text);
        _ifLogoutMenu(text, uContrl);
      },
      shape: Border(bottom: BorderSide(color: klightGreyColor(), width: 1.5)),
    );
  }

 

② text가 로그아웃이 아니면 오른쪽에 화살표를 보이게 함

trailing: text != "로그아웃"
          ? SvgPicture.asset("assets/icon_arrow_next.svg", width: 8)
          : null,

⭐ 오른쪽에 아이콘을 넣으려면 trailing에 넣으면 됨!

 

 

③ 리스트의 onTap 이벤트1 - 비밀번호 변경

void _ifPasswordMenu(String text) {
    text == "비밀번호 변경"
        ? Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => UpdatePasswordPage()),
          )
        : null;
  }

text가 "비밀번호 변경"이면 비밀번호 수정 페이지로 이동

 

 

④ 리스트의 onTap 이벤트2 - 로그아웃

void _ifLogoutMenu(String text, UserController uContrl) {
    text == "로그아웃" ? uContrl.logout() : null;
  }

text가 "로그아웃"이면 로그아웃되게 함