플러터 순한맛 강좌 - Drawer 메뉴 만들기

해당 코드는 코딩셰프의 수업을 바탕으로 만들었습니다.
코딩셰프

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Appbar',
      theme: ThemeData(
        primarySwatch: Colors.red 
      ),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Appbar icon menu'),
        centerTitle: true,
        elevation: 0.0,

        actions: [IconButton(
          icon: Icon(Icons.shopping_cart),
          onPressed: () {
            print('shopping cart is clicked');
          },
        ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('search button is clicked');
            },
          ),
        ],
      ),
      drawer: Drawer( // 햄버거 모양의 메뉴판 만들어주는 역할
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            UserAccountsDrawerHeader( // 현재 사용자의 이미지를 가져오는 역할
              // accountName과 accountEmail이 필수로 들어가야 한다.
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/allu.jpg'),
              ),
              otherAccountsPictures: [  // 한 개 이상의 다른 계정 이미지를 추가할 수 있다.
                CircleAvatar(
                  backgroundImage: AssetImage('assets/mollu.jpg'),
                ),
                // CircleAvatar( 여러 이미지 사용 가능
                //   backgroundImage: AssetImage('assets/mollu.jpg'),
                // )
              ],
              accountName: Text('아루'),
              accountEmail: Text('allu@bluearchive.net'),
              onDetailsPressed: () { // 클릭하면 무언가 펼쳐지면서 더 보여주는 역할
                print('arrow is clicked');
              },
              decoration: BoxDecoration( // 해당 부분을 하나의 박스라고 보고 꾸미겠다는 의미
                color: Colors.red[300],
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0),
                ),
              ),
            ),
            ListTile(
              leading: Icon(  // leading은 맨 처음을 기준으로 붙여줌
                Icons.home,
                color: Colors.grey[850],
              ),
              title: Text('Home'),
              onTap: (){
                print('Home is clicked');
              },
              trailing: Icon(Icons.add),  // trailing은 맨 끝을 기준으로 붙여줌
            ),
            ListTile(
              leading: Icon(  // leading은 맨 처음을 기준으로 붙여줌
                Icons.settings,
                color: Colors.grey[850],
              ),
              title: Text('Setting'),
              onTap: (){
                print('Setting is clicked');
              },
              trailing: Icon(Icons.add),  // trailing은 맨 끝을 기준으로 붙여줌
            ),
            ListTile(
              leading: Icon(  // leading은 맨 처음을 기준으로 붙여줌
                Icons.question_answer,
                color: Colors.grey[850],
              ),
              title: Text('Q&A'),
              onTap: (){
                print('Q&A is clicked');
              },
              trailing: Icon(Icons.add),  // trailing은 맨 끝을 기준으로 붙여줌
            ),
          ],
        ),
      ),
    );
  }
}

이전과 마찬가지로 pubspec.yaml에 그림을 추가해야 한다. 이는 이전 글 참조할 것