[flutter] 플러터 Drawer를 사용하여 사용자가 앱 설정을 변경할 수 있는 방법은?

07 Dec 2023

flutter

앱의 사용자 설정을 변경할 수 있는 옵션을 제공하는 것은 많은 앱에서 필요한 기능입니다. Flutter에서는 이를 구현하기 위해 Drawer 위젯을 사용할 수 있습니다. Drawer는 앱의 주요 내용을 가리지 않으면서 사이드 메뉴를 표시하는 용도로 사용됩니다.

다음은 플러터 Drawer를 사용하여 사용자가 앱 설정을 변경하는 방법을 설명하는 코드 예시입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Drawer Example',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text('John Doe'),
              accountEmail: Text('johndoe@example.com'),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/profile_picture.jpg'),
              ),
            ),
            ListTile(
              title: Text('Settings'),
              onTap: () {
                // 설정 화면으로 이동
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SettingsPage()),
                );
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('This is the home page'),
      ),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: Center(
        child: Text('This is the settings page'),
      ),
    );
  }
}

이 예제 코드에서는 AppBar와 body 안에 Drawer 위젯을 추가하였습니다. Drawer 안에는 ListView를 사용해서 설정 메뉴를 표시했습니다. ListTile 위젯을 사용하여 각 설정을 나타내고, onTap 콜백을 사용하여 해당 설정이 선택되었을 때의 동작을 정의했습니다.

위의 코드를 실행하면 앱 화면의 왼쪽 상단에서 Drawer를 열 수 있습니다. Drawer 안에는 사용자 이름, 이메일 및 프로필 사진이 표시되며, ‘Settings’를 선택하면 SettingsPage로 이동합니다.

이렇게 플러터 Drawer를 사용하여 사용자가 앱 설정을 변경할 수 있도록 구현할 수 있습니다.