[flutter]Drawer사용 방법 및 구조도(UserAccountsDrawerHeader, ListView, ListTile)

 

 

플러터에서 Drawer사용 방법은 매우 간단합니다. 아래 이미지와 같이 만들기 위해서 Drawer을 생성하고 ListView위젯을 생성한 후  UserAccountsDrawerHeader위젯과 ListTile위젯을 생성하면 됩니다. 우측 이미지를 보면 상단 핑크색이 UserAccountsDrawerHeader위젯이고 하단 Home, Q&A, Settings가 ListTile입니다.

 

Drawer구조도및예제이미지

 

 

▣ Drawer위젯 만드는 순서

1. Drawer위젯 생성
2. ListView위젯 생성
3. UserAccountsDrawerHeader위젯 생성
4. ListTile위젯 생성

 

▣ 코드

drawer: Drawer(
  // 드로월위젯
  child: ListView(
    // 리스트뷰위젯
    padding: EdgeInsets.zero,
    children: [
      UserAccountsDrawerHeader(
        // 리스트뷰위젯의 헤더
        accountName: Text("homg"),
        // 헤더 이름
        accountEmail: Text('bbb@naver.com'),
        // 헤더 이메일주소
        currentAccountPicture: CircleAvatar(
          // 헤더 이미지
          backgroundImage: AssetImage('lalee.png'),
        ),
        otherAccountsPictures: [
          // 헤더 우측 추가 이미지
          CircleAvatar(
            backgroundImage: AssetImage('pika.png'),
          ),
          CircleAvatar(
            backgroundImage: AssetImage('pika.png'),
          ),
        ],
        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.question_answer,
          color: Colors.grey[850],
        ),
        title: Text('Q&A'),
        onTap: () {
          print('Q&A');
        },
        trailing: Icon(
          Icons.add,
        ), // 우측 위젯
      ),
      ListTile(
        leading: Icon(
          // 좌측 위젯
          Icons.settings,
          color: Colors.grey[850],
        ),
        title: Text('Settings'),
        onTap: () {
          print('Settings');
        },
        trailing: Icon(
          Icons.add,
        ), // 우측 위젯
      ),
    ],
  ),
),

 

​