[Flutter] Drawer

Drawer : "햄버거 바"로고도 불리며, 클릭 시 우측에서 메뉴가 표시되어 다양한 기능을 접근할 수 있게 한다.

 

 

Drawer

 

---

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MINOKUMA - FLUTTER'),
      ),
      body: MyMain(),
      drawer: MyDrawer(),
    );
  }
}

class MyMain extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('메인'),
      ),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('드로어 헤더'),
            decoration: BoxDecoration(color: Colors.blueAccent),
          ),
          ListTile(
            title: Text('아이템 1'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('아이템 2'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('아이템 3'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('아이템 4'),
            onTap: () {
              Navigator.pop(context);
            },
          )
        ],
      ),
    );
  }
}

 

위젯 구조 : Drawer

               - ListView : [DrawerHeader, ListTile, ListTile, ListTile, ListTile]

 

- 액션 : Drawer 클릭 시 여러 위젯들을 담고있는 ListView를 표시한다.

(*) ListView : 여러 위젯들을 위에서 아래로 순서대로 나열해주는 컬럼 위젯