[flutter] 플러터 Drawer란 무엇인가?
플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동일한 코드로 애플리케이션을 구축할 수 있습니다. 여러 가지 UI 위젯을 제공하며, 그 중 하나가 Drawer입니다.
Drawer란 사용자 인터페이스에서 주로 사이드 메뉴 또는 네비게이션 메뉴를 표시하기 위해 사용되는 위젯입니다. 일반적으로 앱의 왼쪽 또는 오른쪽 상단 모서리에서 화면으로 슬라이딩되어 메뉴 항목을 보여줍니다.
플러터 Drawer 사용 방법
플러터에서 Drawer를 사용하는 방법은 매우 간단합니다. 먼저, Scaffold 위젯을 생성하고, appBar 속성을 추가하여 앱의 상단바를 정의합니다.
Scaffold(
appBar: AppBar(
title: Text('플러터 앱'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'메뉴',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('메뉴 항목 1'),
onTap: () {
// 메뉴 항목 1을 선택했을 때 동작할 코드 작성
},
),
ListTile(
title: Text('메뉴 항목 2'),
onTap: () {
// 메뉴 항목 2를 선택했을 때 동작할 코드 작성
},
),
ListTile(
title: Text('메뉴 항목 3'),
onTap: () {
// 메뉴 항목 3을 선택했을 때 동작할 코드 작성
},
),
],
),
),
body: Center(
child: Text('앱의 본문'),
),
)
위의 코드에서는 Scaffold 위젯의 drawer 속성에 Drawer 위젯을 추가하였습니다. Drawer 위젯은 ListView 위젯을 자식 위젯으로 가지며, ListView의 children 속성에는 Drawer의 메뉴 항목들을 추가합니다. DrawerHeader 위젯을 통해 메뉴의 헤더 부분을 설정할 수 있고, ListTile 위젯을 통해 메뉴 항목들을 추가할 수 있습니다.
각 메뉴 항목에는 onTap 속성을 추가하여 해당 항목을 선택했을 때 어떤 동작을 수행할지 정의할 수 있습니다. 예를 들어, 메뉴 항목을 선택했을 때 다른 화면으로 이동하거나 특정 함수를 실행하는 등의 동작을 수행할 수 있습니다.
플러터의 Drawer는 사용자에게 편리한 네비게이션 메뉴를 제공하기 위한 강력한 도구입니다. 위의 예시 코드를 참고하여 Drawer를 구현해보세요!