Drawer

ListView

flutter의 ListView에는 ListTile이라는 위젯을 제공해줘서 margin이나 padding이 필요없다.

 

Drawer

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      UserAccountsDrawerHeader(
        currentAccountPicture: CircleAvatar(                    //유저 프로필 원형 설정
          backgroundImage: AssetImage("assets/cocktail1.png"),  //프로필 사진 설정
          backgroundColor: Colors.white,                        //프로필 배경화면 설정  
          ),
        accountName: Text("code"),                              //사용자 이름
        accountEmail: Text("code@kakao.com"),                   //사용자 이메일
        onDetailsPressed:(){                                    //옆에 조그만 삼각형 눌렀을때 이벤트 설정
          print("arrow is clicked");
        } ,
        decoration: BoxDecoration(                              //하단 모서리 부분 둥글게 설정
          color: Colors.red,
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(40.0),
            bottomRight: Radius.circular(40.0,
          )
        ),
      ),
      ),
      ],
      ),
  ),

유저 프로필을 간단하게 구현할 수 있다.

 

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

이렇게 옆에 세부 프로필도 생성할 수 있다.

ListTile을 이용하면 프로필 밑에 기능도 구현할 수 있다.

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

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

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

 

출처 : https://youtu.be/j5O49p7CL1o 코딩 쉐프님 플러터 강좌 순한맛