카테고리 없음
Drawer 컴포넌트
신승호.
2023. 1. 31. 18:16
예제와 같은 UI를 구성하려면 https://m2.material.io/components/에서 찾아본 결과 Navigation Drawer가 적합해 보여서 사용했다.
Navigation Drawer
평소에는 닫혀있다가 사용자의 메뉴 버튼 클릭이나 스와이프(Swipe)를 사용하여 슬라이드 형식으로 '서랍'처럼 레이아웃의 옆쪽에서 튀어나오는 메뉴가 Navigation Drawer를 사용해 만든 메뉴이다.
대표적으로는 Gmail 어플리케이션의 좌측 상단 메뉴에 쓰인 레이아웃이다.
Scaffold(
drawer: Drawer(
child: Column(
children: [
SizedBox(
height: 130, //DrawerHeader 사이즈 높이 조절
child: DrawerHeader(
padding: EdgeInsets.fromLTRB(8, 15, 8, 8),
child: ListTile(
title: Text('스나이퍼팩토리'),
subtitle: Text('안녕하세요. 스팩입니다.'),
leading:CircleAvatar(
backgroundColor: Colors.green,
child: Text('스'),
),
),
),
),
Expanded( //Expanded는 Row나 Column등에서 핸드폰 화면에 맞게 균일하게 배치하기 위해서 사용함.
child: ListView( //스크롤 가능 기능
children: [
ListTile(
title: Text('홈'),
subtitle: Text('홈으로 이동하기'),
),
ListTile(
title: Text('커뮤니티'),
subtitle: Text('커뮤니티로 이동하기'),
),
],
),
),
ListTile( //Expanded범위에 포함되지 않음
title: Text('로그아웃'),
subtitle: Text('로그아웃합니다.'),
trailing: Icon(Icons.logout),
),
],
)
),
