flutter(6) - Drawer

1 minute read

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,
      ),
      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: <Widget>[ // 복수의 아이콘 버튼 등을 오른쪽에 배치할 때
          IconButton( // 클릭했을 때 함수가 필수적으로 있어야 한다.
          icon: Icon(Icons.shopping_cart), 
          onPressed: () { 
            print('shopping_cart button is clicked');
           },
        ),
        IconButton( // 클릭했을 때 함수가 필수적으로 있어야 한다.
          icon: Icon(Icons.search), 
          onPressed: () { 
            print('search button is clicked');
           },
        ),
        ],
      ),
      drawer: Drawer( // 왼쪽 서랍 메뉴(햄버거 메뉴)
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            UserAccountsDrawerHeader( // 유저 프로필란
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/BBANTO.png'),
                backgroundColor: Colors.white,
              ),
              otherAccountsPictures: [ // 하나 이상의 다른 계정 이미지를 추가
                CircleAvatar(
                  backgroundColor: Colors.white,
                  backgroundImage: AssetImage('assets/BBANTO.png'),
                ),
                CircleAvatar(
                  backgroundColor: Colors.white,
                  backgroundImage: AssetImage('assets/BBANTO.png'),
                ),
              ],
              accountName: Text("BBANTO"), // 필수값
              accountEmail: Text("BBANTO@gmail.com"), // 필수값
              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(Icons.home,
              color: Colors.grey[850]), // 좌측에 아이콘을 위치
              title: Text('Home'),
              onTap: (){
                print('Home is clicked');
              },
              trailing: Icon(Icons.add), // 끝나는 점에 아이콘을 배치할 수 있다.
            ),
            ListTile(
              leading: Icon(Icons.settings,
              color: Colors.grey[850]), // 좌측에 아이콘을 위치
              title: Text('settings'),
              onTap: (){
                print('Settings is clicked');
              },
              trailing: Icon(Icons.add), // 끝나는 점에 아이콘을 배치할 수 있다.
            ),
            ListTile(
              leading: Icon(Icons.question_answer,
              color: Colors.grey[850]), // 좌측에 아이콘을 위치
              title: Text('question_answer'),
              onTap: (){
                print('Question_answer is clicked');
              },
              trailing: Icon(Icons.add), // 끝나는 점에 아이콘을 배치할 수 있다.
            )
          ],
        ),
      ),
    );
  }
}

Leave a comment