Flutter-Drawer

Drawer

Drawer 메뉴는 사진처럼 클릭 시 좌측에서 스르르 열리는 좌측 사이드 메뉴이다.

drawer.dart 파일을 만들어주고 main에서 필요한 부분만 남기고 home: 부분을 알맞게 바꿔주고 시작한다

 

drawer.dart

import 'package:flutter/material.dart';

class MyDrawer extends StatefulWidget {
  @override
  _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[

            UserAccountsDrawerHeader(
              accountName: Text('최준영',style: TextStyle(color: Colors.white),),
              accountEmail: Text('chois@naver.com',style: TextStyle(color: Colors.white),),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('images/ryn.gif'),
              ),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('images/space.jpg'),
                  fit: BoxFit.cover
                ),
                color: Colors.amber
              ),
            ),
            ListTile(
              leading: Icon(Icons.library_music),
              title: Text('Music'),
              onTap: (){
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.movie),
              title: Text('Movies'),
              onTap: (){
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.shopping_cart),
              title: Text('Shopping'),
              onTap: (){
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.apps),
              title: Text('Apps'),
              onTap: (){
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text("drawer"),
      ),
      body: Center(
        child: Text('Drawer 예제'),
      ),
    );
  }
}

ListView

drawer메뉴에 많은 양의 listile이 있을수 있으니 스크롤 가능한 listview를 넣어줍니다.

헤더 부분을 넣으면 위에 칸이 남아서 padding: EdgeInsets.zero를 넣어서 꽉 찬 헤더를 보여줍니다.

 

 

 

UserAccountsDrawerHeader

drawer의 헤더부분으로 DrawerHeader도 있지만 저는 accountName, accountEmail, currentAccountPicture이 포함된 UserAccountsDrawerHeader을 사용했습니다.

 

decoration

decoration: BoxDecoration을 선언하고 아래에 image: DecorationImage를 넣어 헤더의 배경 사진을 넣어줍니다.

사진 말고 BoxDecoration에 color: Colors.amber 이런 식으로 색상만 넣어주는 것도 가능합니다.

 

ListTile

리스트뷰 안에 넣어줄 메뉴들입니다. 

leading으로 아이콘을 넣어주고 title에 어떤 text를 넣을지 정해주고 ontap(){}으로 클릭 시 이벤트 처리를 해줍니다