[Flutter/플러터] Drawer menu 만들기!

◾ 완성모습

 

앞서 아이콘을 넣어서 만든 메뉴에 햄버거 버튼을 눌렀을 때 사이드로 열리는 메뉴를 만들었습니다! flutter에서는 drawer이라는 것으로 쉽게 만들 수 가 있답니다!

 

 

 

◾ 기본 구성

 

 

drawer 을 만들고, 그 안에 자식 위젯(child)으로 ListView를 만들어줍니다. 그 자식 위젯 안에 또 다른 하위 위젯(children)을 생성해줍니다. ListView는 두가지로 구성이 됩니다. 일단 Header부분에서 계정이름, 프로필 사진 등을 넣어주고, 다른 페이지로 넘어갈 수 있는 메뉴를 ListTile이라는 이름 아래 생성해줍니다 ListTile구성에 보시면 onTap이 있는데, 이 부분은 나중에 가면 더 깊게 공부할 예정이지만 간단하게 onPressed와 비교해보자면  onPressed는 주로 버튼에 사용이 되고 onTap은 제스쳐가 더해진 클릭 동작을 표현할 때 쓴다고합니다. 길게 누른다거나 두번 탭하는 그런 동작! 😀

 

 

 

◾ Code

class Grade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // web 화면구성을 위해 도와주는 도화지같은 요소 이거 필수임
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: Text('MENU'),
        centerTitle: true,
        backgroundColor: Colors.amber[700],
        elevation: 0.0,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              print('shopping cart button is clicked');
            },
          ),
          IconButton(
            icon: Icon(Icons.search),
            //iconbutton action
            onPressed: () {
              print('search button is clicked');
            },
          ),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/moon.png'),
                backgroundColor: Colors.white,
              ),
              otherAccountsPictures: <Widget>[
                CircleAvatar(
                  backgroundImage: AssetImage('assets/redux.png'),
                  backgroundColor: Colors.white,
                ),
              ],
              accountName: Text('Moon'),
              accountEmail: Text('moon@gmail.com'),
              onDetailsPressed: () {
                print('open drawer');
              },
              decoration: BoxDecoration(
                  color: Colors.red[200],
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(30.0),
                    bottomRight: Radius.circular(30.0),
                  )),
            ),
            ListTile(
              leading: Icon(Icons.home, color: Colors.grey[850]),
              title: Text("Home"),
              //gesture
              onTap: () {
                print('Home is clicked');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(Icons.settings, color: Colors.grey[850]),
              title: Text("Setting"),
              //gesture
              onTap: () {
                print('Setting is clicked');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(Icons.question_answer, color: Colors.grey[850]),
              title: Text("Q&A"),
              //gesture
              onTap: () {
                print('Q&A is clicked');
              },
              trailing: Icon(Icons.add),
            ),
          ],
        ),
      ),
    );
  }
}

◾ leading 이 왼쪽 배치를 위한 것이라면 trailing은 오른쪽 배치를 위한 것이다