[flutter] 플러터 Drawer에서 네비게이션 기능은 어떻게 구현되는가?
플러터에서 Drawer를 사용하여 네비게이션 기능을 구현하는 방법에 대해 알아보겠습니다.
- Drawer 위젯을 생성합니다.
Drawer( child: ListView( children: <Widget>[ ListTile( title: Text('메뉴 1'), onTap: () { // 메뉴 1 클릭 시 처리할 로직을 작성합니다. }, ), ListTile( title: Text('메뉴 2'), onTap: () { // 메뉴 2 클릭 시 처리할 로직을 작성합니다. }, ), ], ), )
-
ListTile 위젯을 사용하여 각 메뉴를 생성합니다. 각 ListTile의 onTap 속성을 설정하여 클릭 시 처리할 로직을 작성할 수 있습니다.
- 메뉴 클릭 시 해당 화면으로 이동하고 싶다면 Navigator 클래스를 사용하여 화면을 전환할 수 있습니다.
import 'package:flutter/material.dart'; // 메뉴 1 화면 class Menu1Screen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('메뉴 1'), ), body: Center( child: Text('메뉴 1 화면'), ), ); } } // 메뉴 2 화면 class Menu2Screen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('메뉴 2'), ), body: Center( child: Text('메뉴 2 화면'), ), ); } } // 메인 화면 class MainScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('메인 화면'), ), drawer: Drawer( child: ListView( children: <Widget>[ ListTile( title: Text('메뉴 1'), onTap: () { Navigator.push( context, MaterialPageRoute(builder: (context) => Menu1Screen()), ); }, ), ListTile( title: Text('메뉴 2'), onTap: () { Navigator.push( context, MaterialPageRoute(builder: (context) => Menu2Screen()), ); }, ), ], ), ), body: Center( child: Text('메인 화면'), ), ); } } // 앱 실행 void main() { runApp(MaterialApp( home: MainScreen(), )); }
위 예시 코드에서는 메인 화면(MainScreen)에 Drawer를 설정하고, 각 메뉴를 클릭할 때마다 Navigator를 사용하여 해당 화면으로 이동하도록 구현되어 있습니다.