앱개발/flutter
Drawer
뷰베
2022. 3. 10. 15:55
- 좌측 drawer 메뉴 부분
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage('assets/3.jpg'),
// backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
),
accountName: Text('BYUBE'),
accountEmail: Text('jeffkim@korfinholdings.co.kr'),
)
],
),
),
- 위에 헤더 부분 편집 라운드 효과 및 정보 펼치기 버튼 추가 ( 현재는 console 에 글씨만 출력 되게 입력)
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage('assets/3.jpg'),
// backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
),
accountName: Text('BYUBE'),
accountEmail: Text('kangjunne@naver.com'),
onDetailsPressed: (){
print('아래로 펼쳐라');
}, //클리후 아래로 펼쳐지기
decoration: BoxDecoration(
color: Colors.purple[200],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40.0),
bottomRight: Radius.circular(40.0)
)
),
)
],
),
),
- ListTile
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage('assets/3.jpg'),
// backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
),
otherAccountsPictures: [
CircleAvatar(
backgroundImage: AssetImage('assets/1.jpg'),
),
],
accountName: Text('BYUBE'),
accountEmail: Text('kangjunne@naver.com'),
onDetailsPressed: () {
print('아래로 펼쳐라');
}, //클리후 아래로 펼쳐지기
decoration: BoxDecoration(
color: Colors.purple[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: (){ //tap 했을때 기능
print('Home is clicked');
},
trailing: Icon(Icons.add), // + 아이콘 추가
),
ListTile(
leading: Icon(
Icons.settings,
color: Colors.grey[850],
),
title: Text('Setting'),
onTap: (){ //tap 했을때 기능
print('Setting is clicked');
},
trailing: Icon(Icons.add), // + 아이콘 추가
),
ListTile(
leading: Icon(
Icons.question_answer,
color: Colors.grey[850],
),
title: Text('Q&A'),
onTap: (){ //tap 했을때 기능
print('Q&A is clicked');
},
trailing: Icon(Icons.add), // + 아이콘 추가
),
],
),
),
반응형