[flutter] 플러터 Drawer에서 네비게이션 기능은 어떻게 구현되는가?

플러터에서 Drawer를 사용하여 네비게이션 기능을 구현하는 방법에 대해 알아보겠습니다.

  1. Drawer 위젯을 생성합니다.
    Drawer(
      child: ListView(
        children: <Widget>[
          ListTile(
            title: Text('메뉴 1'),
            onTap: () {
              // 메뉴 1 클릭 시 처리할 로직을 작성합니다.
            },
          ),
          ListTile(
            title: Text('메뉴 2'),
            onTap: () {
              // 메뉴 2 클릭 시 처리할 로직을 작성합니다.
            },
          ),
        ],
      ),
    )
    
  2. ListTile 위젯을 사용하여 각 메뉴를 생성합니다. 각 ListTile의 onTap 속성을 설정하여 클릭 시 처리할 로직을 작성할 수 있습니다.

  3. 메뉴 클릭 시 해당 화면으로 이동하고 싶다면 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를 사용하여 해당 화면으로 이동하도록 구현되어 있습니다.