[flutter] FlatButton을 사용하여 사이드바를 만드는 방법은?
이번 포스트에서는 flutter에서 FlatButton을 사용하여 사이드바를 만드는 방법에 대해 알아보겠습니다.
1. FlatButton 위젯을 사용하여 버튼 생성
먼저, FlatButton 위젯을 사용하여 사이드바를 열 수 있는 버튼을 생성합니다. 버튼을 누르면 사이드바가 열리도록 설정해야 합니다.
FlatButton(
onPressed: () {
// 사이드바 열기 로직 작성
},
child: Text('Open Sidebar'),
),
2. 사이드바 위젯 생성
다음으로, 사이드바를 위한 위젯을 작성합니다. 일반적으로 Drawer 위젯을 사용하여 사이드바를 만들 수 있습니다.
Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('User Name'),
accountEmail: Text('user@example.com'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text('U'),
),
),
ListTile(
title: Text('Menu Item 1'),
onTap: () {
// 메뉴 아이템 1 선택 시 처리할 로직 작성
},
),
ListTile(
title: Text('Menu Item 2'),
onTap: () {
// 메뉴 아이템 2 선택 시 처리할 로직 작성
},
),
],
),
),
3. 버튼과 사이드바 연결
마지막으로, 앞서 생성한 FlatButton과 Drawer를 연결하여 버튼을 누를 때 사이드바가 열리도록 설정합니다.
Scaffold(
appBar: AppBar(
title: Text('SideBar Example'),
),
body: Center(
child: FlatButton(
onPressed: () {
_scaffoldKey.currentState.openDrawer();
},
child: Text('Open Sidebar'),
),
),
key: _scaffoldKey,
drawer: Drawer(...), // 앞에서 만든 사이드바 위젯을 여기에 추가
);
이제 FlatButton을 사용하여 간단한 사이드바를 만들었습니다. 원하는 기능에 따라 버튼과 사이드바의 디자인과 동작을 추가로 수정할 수 있습니다.
후속 포스트에서는 보다 기능적이고 사용자 친화적인 사이드바를 만드는 방법에 대해 더 자세히 알아보도록 하겠습니다.
더 많은 정보를 원하신다면 flutter 공식 문서를 참고하시기 바랍니다.