[flutter] 플러터 Drawer에서 아이템을 클릭했을 때 어떤 동작이 일어나는가?

07 Dec 2023

flutter

먼저, Drawer 위젯을 구성하는 아이템은 ListTile 위젯을 사용하여 만들 수 있습니다. ListTile은 드로어 메뉴에 표시할 항목을 나타내는데 사용되며, 클릭 이벤트를 처리할 수 있는 기능을 제공합니다.

아래의 예제 코드에서는 Drawer에 3개의 ListTile을 추가하고, 각각의 아이템을 클릭했을 때 발생하는 동작을 구현합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drawer Example'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  // Item 1 클릭 시 동작
                  print('Item 1 clicked');
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  // Item 2 클릭 시 동작
                  print('Item 2 clicked');
                },
              ),
              ListTile(
                title: Text('Item 3'),
                onTap: () {
                  // Item 3 클릭 시 동작
                  print('Item 3 clicked');
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Click the menu icon to open the drawer'),
        ),
      ),
    );
  }
}

이 코드에서는 ListTile 위젯에 onTap 콜백을 설정하여 각각의 아이템을 클릭했을 때 원하는 동작을 수행할 수 있습니다. 위의 예제에서는 각 아이템 클릭 시 동작으로 ‘print’ 함수를 사용하여 터미널에 해당 아이템의 클릭 정보를 출력하도록 구현되어 있습니다.

위의 코드를 실행하고 드로어 메뉴를 열어 각 아이템을 클릭하면, 해당 아이템에 설정된 동작이 발생하여 터미널에 출력됩니다.

플러터의 Drawer를 활용하면 사용자가 쉽게 사이드 메뉴를 조작할 수 있고, 클릭 이벤트를 통해 원하는 동작을 수행할 수 있습니다. 더 복잡한 동작이나 화면 전환 등을 구현하고 싶다면 onTap 콜백에서 필요한 로직을 추가해주면 됩니다.

참고자료: