[2023.11.21] 플러터(flutter) 순한 맛 강좌 16 | Drawer Menu #2

<< 소스 코드 >>

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(
      title: 'Appbar',
      theme: ThemeData(
        primarySwatch: Colors.red   //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,  //title 영역에서 center 정렬
        elevation: 0.0,     //appbar의 입체감을 0으로 지정
        //leading : 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때 사용
        // leading: IconButton(  //IconButton에 이벤트 미지정시 오류 발생
        //   icon: Icon(Icons.menu), //(햄버거)메뉴 버튼 추가
        //   onPressed: () {   //Icons.menu 버튼 클릭시 이벤트
        //     print('menu button is clicked.'); //Debug 콘솔창에 메세지 출력
        //   },
        // ),
        //actions : 복수개의 아이콘 버튼을 오른쪽에 배치할 때 사용
        actions: <Widget>[
          IconButton(  //IconButton에 이벤트 미지정시 오류 발생
            icon: Icon(Icons.shopping_cart),  //쇼핑카트 버튼 추가
            onPressed: () {   //Icons.shopping_cart 버튼 클릭시 이벤트
              print('shopping cart button is clicked.'); //Debug 콘솔창에 메세지 출력
            },
          ),
          IconButton(  //IconButton에 이벤트 미지정시 오류 발생
            icon: Icon(Icons.search), //검색 버튼 추가
            onPressed: () {   //Icons.search 버튼 클릭시 이벤트
              print('search button is clicked.'); //Debug 콘솔창에 메세지 출력
            },
          ),
        ],
      ),
      drawer: Drawer( //Drawer 위젯 추가
        child: ListView(  //ListTile의 집합
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text('BBANTO'),
              accountEmail: Text('bbanto@bbanto.com'),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/circle.png'),
                backgroundColor: Colors.white,
              ),
              otherAccountsPictures: <Widget>[  //다른 계정 이미지 추가
                CircleAvatar(
                  backgroundColor: Colors.white,
                  backgroundImage: AssetImage('assets/sanrio.png'),
                ),
                // CircleAvatar(
                //   backgroundColor: Colors.white,
                //   backgroundImage: AssetImage('assets/sanrio.png'),
                // ),
              ],
              onDetailsPressed: (){ //상세 내역 버튼 추가 및 이벤트 지정
                print('arrow is clicked.');
              },
              decoration: BoxDecoration(  //꾸미는 효과
                color: Colors.red[200],
                borderRadius: BorderRadius.only(  //곡선 처리
                  bottomLeft: Radius.circular(40.0),  //하단 좌측 곡선 처리
                  bottomRight: Radius.circular(40.0), //하단 우측 곡선 처리
                )
              ),
            ),
            ListTile(
              leading: Icon(  //ListTile 시작점에 아이콘 추가
                Icons.home,   //ListTile에 Home 아이콘 추가
                color: Colors.grey[850],  //ListTile 색상 지정
              ),
              title: Text('Home'),  //ListTile 문구 추가
              onTap: (){
                print('Home is clicked.');  //ListTile 이벤트 추가
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(  //ListTile 시작점에 아이콘 추가
                Icons.settings, //ListTile에 Setting 아이콘 추가
                color: Colors.grey[850],  //ListTile 색상 지정
              ),
              title: Text('Setting'), //ListTile 문구 추가
              onTap: (){
                print('Setting is clicked.');  //ListTile 이벤트 추가
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(  //ListTile 시작점에 아이콘 추가
                Icons.question_answer, //ListTile에 Q&A 아이콘 추가
                color: Colors.grey[850],  //ListTile 색상 지정
              ),
              title: Text('Q&A'), //ListTile 문구 추가
              onTap: (){
                print('Q&A is clicked.');  //ListTile 이벤트 추가
              },
              trailing: Icon(Icons.add),
            ),
          ],
        ),
      ),
    );
  }
}

 

<< 출력 화면 >>