[Flutter] AppBar Drawer예제

 

- leading : 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때

- trailing : 아이콘 버튼이나 간단한 위젯을 오른쪽에 배치할 때

- actions : 복수의 아이콘 버튼 등을 오른쪽에 배치할 때

- onPressed : 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의하는 곳

- listTile : listview의 item의 역할을 하는 widget

- boxdecoration : 위젯을 꾸며주는 기능을 하며 radius를 추가할 수 있음

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppBar',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var searchButton = IconButton(
        onPressed: () {
          print('검색 아이콘 클릭');
        },
        icon: Icon(Icons.search));
    var shoppingButton = IconButton(
        onPressed: () {
          print('쇼핑카트 아이콘 클릭');
        },
        icon: Icon(Icons.shopping_cart));
    var addButton = IconButton(
        onPressed: () {
          print('add 아이콘 클릭');
        },
        icon: Icon(Icons.add));
    var ca = CircleAvatar(
      backgroundImage: AssetImage('assets/my_progress_check.png'),
      backgroundColor: Colors.white,
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('App Bar'),
        centerTitle: true,
        elevation: 0.0,
        actions: [shoppingButton, searchButton],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/prd_cat_default.png'),
                backgroundColor: Colors.white,
              ),
              otherAccountsPictures: <Widget>[ca, ca, ca],
              accountName: Text('jinhan'),
              accountEmail: Text('jinhan38@naver.com'),
              onDetailsPressed: () {
                print('상세내용 보기 클릭');
              }, //onDetailsPressed의 리턴 타입은 voidCallback이다 때문에 (){}
              decoration: BoxDecoration(
                  color: Colors.blue[200],
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(40.0),
                      bottomRight: Radius.circular(40.0))),
            ),
            ListTile(
              leading: Icon(Icons.home, color: Colors.grey[850]),
              trailing: addButton,
              title: Text('home'),
              onTap: () {
                print('Home buttons is clicked');
              },
            ),
            ListTile(
              leading: Icon(Icons.settings, color: Colors.grey[850]),
              trailing: addButton,
              title: Text('settings'),
              onTap: () {
                print('Settings buttons is clicked');
              },
            ),
            ListTile(
              leading: Icon(Icons.question_answer, color: Colors.grey[850]),
              trailing: addButton,
              title: Text('question'),
              onTap: () {
                print('question buttons is clicked');
              },
            ),
          ],
        ),
      ), //listTile을 이용해 손쉽게 리스트 item 구현
    );
  }
}