Flutter Drawer Widget

android DrawerLayout 을 구글 검색하면 어떤 사항인지 정보가 나온다.

 

https://api.flutter.dev/flutter/material/Drawer-class.html 를 검색하면 매뉴얼로 제공되는 정보를 알 수 있다.

Drawer Navigation 메뉴는 앱의 Main UI 로 구현하는 경우가 많다.

 

StatefulWidget 으로 전환하는 것도 쉽게 가능하다. StatelessWidget 에 마우스를 놓고 변경하면 된다.

사용자 반응 앱을 만들려면 StatefulWidget 으로 구성한다.

// lib 폴더에서 dartfile을 선택하고 drawer 입력하면 drawer.dart 파일이 생성된다.
import 'package:flutter/material.dart';
 
// stless 입력하고 TAB키를 누르면 자동완성 Class 가 생성된다.
class Drawer extends StatelessWidget {
  const Drawer({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

main.dart 파일에서 Class 분리하여 별도 파일 생성하여 처리한다.

import 'package:codingapple/drawer.dart';
import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  State<MyApp> createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const DrawerMenu(title: 'Drawer Demo'),
    );
  }
}

 

drawer.dart

// lib 폴더에서 dartfile을 선택하고 drawer 입력하면 drawer.dart 파일이 생성된다.
import 'package:flutter/material.dart';
 
import 'dialog.dart';
 
// stful 입력하고 TAB키를 누르면 자동완성 Class 가 생성된다.
// 예약어에 해당하는 클래스명은 피한다.
class DrawerMenu extends StatefulWidget {
  const DrawerMenu({Key? key, required this.title}) : super(key: key);
 
  final String title; // 부모 위젯으로부터 전달받은 변수
 
  @override
  State<DrawerMenu> createState() => _DrawerMenuState();
}
 
class _DrawerMenuState extends State<DrawerMenu> {
  @override
  Widget build(BuildContext context) {
    // https://api.flutter.dev/flutter/material/Drawer-class.html 에서
    // 복사하여 Container를 덮어쓰기 한다.
    // 아래 코드와 비교하면 약간 수정된 사항이 있으니 참고하시라.
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[ // const <Widget> 에서 const 를 삭제한다.
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
              tileColor: Colors.red,
              trailing: Icon(Icons.more_vert),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text(
                'Profile',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                  color: Colors.blue,
                ),
              ),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => LView(title: '연락처 앱'),
                  ),
                );
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Two-line ListTile'),
              subtitle: Text('Here is a second line'),
              trailing: Icon(Icons.more_vert),
              isThreeLine: true,
            ),
          ],
        ),
      ),
    );
  }
}

 

Android 앱 개발시 사용하는 에뮬레이터를 공용으로 사용할 수 있으며, 위 코드의 결과 UI 이다.