Flutter_10. Drawer, ListView, UserAccountsDrawerHeader, AppBar IconButton

개발하기/Flutter Start

Flutter_10. Drawer, ListView, UserAccountsDrawerHeader, AppBar IconButton

uraon 2023. 5. 4. 07:00

728x90

오늘은 AppBar에 IconButton을 넣고, 클릭시 Drawer를 열어보는 것을 메모하려한다.

AppBar에 사용되는 IconButton은 위치에 따라 leading, actions로 나뉜다. 자세한 내용은 아래 링크 확인! :)

https://api.flutter.dev/flutter/material/AppBar-class.html

AppBar class - material library - Dart API

A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar. App bars typically expose one or more common actions with IconButtons which are optionally followed by a PopupMenuButton for

api.flutter.dev

https://docs.flutter.dev/cookbook/design/drawer

Add a drawer to a screen

How to implement a Material Drawer.

docs.flutter.dev

Figma - 간단한 스케치와 플로우

1) Figma로 화면 스케치

배운 것을 토대로 어떤 페이지와 플로우를 만들 수 있을지 고민해보았다.
우선은 하나씩 차근차근 구현해보려한다! 오늘은 노랑 영역에 보이는 Drawer와 페이지 이동까지만!!

2) ProtoType 플레이로 플로우 맛보기

수업 중에 배운 것을 Drawer에 페이지로 리스트업 하면 좋을 것 같다.
파일 하나에 여러 기능이 있으니, 나중에 골라서 사용도 가능함! :)

AppBar IconButton, Drawer

1) home.dart 기본 화면 셋팅하고 확인

- appBar 타이틀, 칼라
- body에 Column으로 이미지와 Row(버튼2개) 추가

2) AppBar에 IconButton 추가

AppBar 앞(좌측)에 사용 가능한 아이콘 버튼은 1개
- leading: IconButton

AppBar 뒤(우측)에 아이콘 버튼 여러개 사용 가능
- actions: [IconButton, IconButton, ...]

3) AppBar에 아이콘 버튼 생성 확인

4) AppBar와 body 사이에 Drawer 추가

UserAccountsDrawerHeader()
- 이름과 이메일 정보 추가
- currentAccountPicture: CircleAvatar로 계정 메인 이미지 1개 설정
- otherAccountsPictures: [CircleAvatar, CircleAvatar, ...]로 서브 이미지 여러개 설정

      // ** Drawer 
      drawer: Drawer(
        child: ListView(
          // **기본 패딩 사용하지 않고, 칼라 모두 채우기
          padding: EdgeInsets.zero,          
          children: const [
            UserAccountsDrawerHeader(
              // --- Main Image
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('images/ura.jpg'),
              ),
              // --- Sub Images
              otherAccountsPictures: [
                CircleAvatar(
                  backgroundImage: AssetImage('images/ura.jpg'),
                ),
                CircleAvatar(
                  backgroundImage: AssetImage('images/ura.jpg'),
                ),                
              ],

              // --- 계정 정보(Name, Email)
              accountName: Text('Uraon'), 
              accountEmail: Text('uraon.tistory.com')
            ),
          ],

        ),
      ),

5) 2번에서 추가했던 leading: IconButton 주석처리하고 저장, 화면 확인

6) Drawer 칼라, 보더 꾸미기

UserAccountsDrawerHeader
- 메인 이미지 currentAccountPicture: CircleAvatar
- 서브 이미지 otherAccountsPictures: [CircleAvatar, CircleAvatar, ...]
- 계정 네이밍 accountName: Text
- 계정 이메일 accountEmail: Text
- 꾸미기 decoration: BoxDecoration()

7) 저장하고, Drawer 확인

728x90