Flutter Drawer Widget

Scaffold.drawer

메뉴처럼 띄울 수 있는 Drawer() 위젯입니다. Scaffold() 내부에서 정의할 수 있습니다.

Scaffold(
	drawer: Drawer(
    	child: ...    
    )
)

child

위 Drawer()는 총 2부분, 4개의 위젯으로 이루어져 있습니다.
그 2부분을 나란히 배치하기 위해 ListView()위젯을 사용합니다.

Drawer(
	child: ListView(
    	children: [...]
    )
)

1. UserAccountsDrawerHeader()

1. currentAccountPicture

UserAccountsDrawerHeader(
	currentAccountPicture: CircleAvatar(
    	backgroundImage: AssetImage('assets/docker.png'),
        backgroundColor: Colors.white
    )
)

죄측의 메인 이미지 공간입니다.
CircleAvatar()로 이미지 구간 설정 위젯을 놓고, 그 내부에서 AssetImage()를 통해 이미지를 불러오고 있습니다.

2. otherAccountsPictures

UserAccountsDrawerHeader(
	...
    otherAccountsPictures:[
    	CircleAvatar(
              backgroundImage: AssetImage('assets/golang.png'),
              backgroundColor: Colors.white,
        ),
    ]
)

우측의 서브 이미지 공간입니다. 여러개를 설정할 수 있습니다.

3. others

UserAccountsDrawerHeader(
	accountName: Text('rexop73@gmail.com'),
    accountEmail: Text('ithank'),
    onDetailsPressed: () {
        print('onDetailsPressed');
    },
    decoration: BoxDecoration(
    	color: Colors.red[200],
        borderRadius: BorderRadius.only(
        	bottomLeft: Radius.circular(40.0),
        	bottomRight: Radius.circular(40.0),
        )),
    ),
)

accountName, accountEmail, onDetailsPressed, decoration 이 있습니다.

onDetailsPressed: 우측 화살표를 클릭했을 때의 동작을 정의할 수 있습니다.
decoration: 다른 위젯에서도 자주 등장하는 속성입니다. BoxDecoration()위젯 내부에 color, borderRadius, 속성들을 지정합니다.

2. ListTile()

ListTile(
    leading: Icon(
        Icons.home,
        color: Colors.grey[850],
    ),
    title: Text('Home'),
    onTap: () {
        print('Home');
    },
    trailing: Icon(Icons.add),
),

appBar 처럼 leading속성이 있고, 여기선 trailing속성을 통해 좌측 위젯을 추가할 수 있습니다

소스

Scaffold(
      appBar: AppBar(
        title: Text('MyDrawer'),
        centerTitle: true,
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/docker_whale.png'),
                backgroundColor: Colors.white,
              ),
              otherAccountsPictures: [
                CircleAvatar(
                  backgroundImage: AssetImage('assets/golang.png'),
                  backgroundColor: Colors.white,
                ),
                // CircleAvatar(
                //   backgroundImage: AssetImage('assets/golang.png'),
                //   backgroundColor: Colors.white,
                // )
              ],
              accountName: Text('rexop73@gmail.com'),
              accountEmail: Text('ithank'),
              onDetailsPressed: () {
                print('onDetailsPressed');
              },
              decoration: BoxDecoration(
                  color: Colors.red[200],
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(40.0),
                    bottomRight: Radius.circular(40.0),
                  )),
            ),
            ListTile(
              leading: Icon(
                Icons.home,
                color: Colors.grey[850],
              ),
              title: Text('Home'),
              onTap: () {
                print('Home');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(
                Icons.settings,
                color: Colors.grey[850],
              ),
              title: Text('Settings'),
              onTap: () {
                print('Settings');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(
                Icons.question_answer,
                color: Colors.grey[850],
              ),
              title: Text('Q&A'),
              onTap: () {
                print('question_answer');
              },
              trailing: Icon(Icons.add),
            )
          ],
        ),
      ),
    );