플러터(Flutter) 메뉴 만들기 -1 : AppBar / Drawer

Appbar 메뉴

 

타이틀 텍스트만 추가한 코드입니다.

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: 'Menu Example',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menu Example'),
        ),
      )
    );
  }
}

 

 

단순히 메뉴 아이콘을 추가했습니다.

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: 'Menu Example',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menu Example'),
          leading: Icon(
            Icons.menu,
          ),
        ),
      )
    );
  }
}

 

 

메뉴버튼을 눌렀을 때 동작하고자 하는 코드를 넣을 때는 onTap 에 정의합니다.

AppBar(
  title: Text("Menu Example"),
  leading: GestureDetector(
    onTap: () { },
    child: Icon(
      Icons.menu,  // add custom icons also
    ),
  ),
)

 

검색, 설정 등 다양한 메뉴를 넣고자할 때는 다음과 같이 사용할 수 있습니다.

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: 'Menu Example',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menu Example'),
          leading: GestureDetector(
            onTap: () {},
            child: Icon(
              Icons.menu,
            )
          ),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.only(right: 20.0),
              child: GestureDetector(
                onTap: () {},
                child: Icon(
                  Icons.search,
                  size: 26.0,
                ),
              )
            ),
            Padding(
              padding: EdgeInsets.only(right: 20.0),
              child: GestureDetector(
                onTap: () {},
                child: Icon(
                  Icons.more_vert
                ),
              )
            ),
          ],
        ),
      )
    );
  }
}

 

 

Drawer 메뉴

 

Drawer 을 사용하면 버튼을 눌렀을 때 사이드 메뉴가 나옵니다.

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: 'Menu Example2',
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menu Example2'),
          centerTitle: true,
          elevation: 0.0,

          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.menu), 
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.more_vert), 
              onPressed: () {},
            )
          ],
        ),
        drawer: Drawer(),
      )
    );
  }
}