Flutter에서 멋진 탐색 창/사이드바 메뉴 구축

이 기사에서는 Flutter에서 탐색 창/사이드바 메뉴를 만드는 방법을 알려 드리겠습니다.
서랍은 장치 화면인 Scaffold의 왼쪽 가장자리에서 수평으로 미끄러지는 Material Design 패널입니다. 서랍은 비계 서랍(왼쪽) 속성과 함께 사용됩니다. 서랍은 개별 필요에 맞게 사용자 정의할 수 있지만 일반적으로 이미지 또는 고정 정보를 표시하는 헤더와 탐색 가능한 페이지 목록을 표시하는 ListView가 있습니다. 일반적으로 서랍은 탐색 목록에 항목이 많을 때 사용됩니다.

→ 1단계: 플러터 프로젝트를 생성합니다.

→ 2단계 : 플러터 상태 비저장 위젯을 만들고 이름을 Birthday로 지정합니다. 또한 집 속성에 해당 위젯을 추가하십시오.



→ Step-3 : Scaffold, Appbar, body & 서랍 속성을 추가합니다.


이제 앱이 다음과 같이 보일 것입니다.



→ 4단계: 서랍 헤더, currentAccountPicture, accountName, accountEmail 및 otherAccountsPictures를 추가합니다.

서랍 헤더를 설정하기 위해 내장 옵션인 UserAccountsDrawerHeader가 있습니다. UserAccountsDrawerHeader는 currentAccountPicture, accountName, accountEmail, otherAccountsPictures 및 장식 속성을 설정하여 앱의 사용자 세부 정보를 표시하기 위한 것입니다. 탐색 가능한 페이지 목록을 표시하려면 ListView를 추가하십시오.



이제 앱이 다음과 같이 보일 것입니다.



→ 5단계: 서랍에 listTile 및 탐색을 몇 개 추가합니다.


이제 앱이 다음과 같이 보일 것입니다.


이 서랍 앱은 세로 또는 가로 모드에 모두 적합합니다.



전체 코드:

import ‘package:flutter/material.dart’;
void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: ‘Flutter Demo’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Birthdays(),
);
}
}
class Birthdays extends StatelessWidget {
const Birthdays({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(‘Drawer’),
),
body: const Center(
child: Icon(
Icons.cake,
size: 120.0,
color: Colors.orange,
),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
UserAccountsDrawerHeader(
currentAccountPicture: Icon(
Icons.face,
size: 48.0,
color: Colors.white,
),
otherAccountsPictures: [
Icon(
Icons.bookmark_border,
color: Colors.white,
),
],
accountName: Text(‘H. A. Smrity’),
accountEmail: Text(‘[email protected]’),
),
ListTile(
leading: Icon(Icons.date_range),
title: Text(‘Birth date’),
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => BirthDate(),
),
),
),
ListTile(
leading: Icon(Icons.mood),
title: Text(‘Mood’),
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => Mood(),
),
),
),
ListTile(
leading: Icon(Icons.note_add),
title: Text(‘Note’),
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => Note(),
),
),
),
Divider(),
ListTile(
leading: Icon(Icons.settings),
title: Text(‘Settings’),
onTap: () => Navigator.pop(context),
),
],
),
),
);
}
}
class Note extends StatelessWidget {
const Note({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Note’),
),
body: Center(
child: Icon(
Icons.note_add,
size: 120.0,
color: Colors.orange,
),
),
);
}
}
class Mood extends StatelessWidget {
const Mood({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Mood’),
),
body: Center(
child: Icon(
Icons.mood,
size: 120.0,
color: Colors.orange,
),
),
);
}
}
class BirthDate extends StatelessWidget {
const BirthDate({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Birth Date’),
),
body: Center(
child: Icon(
Icons.date_range,
size: 120.0,
color: Colors.orange,
),
),
);
}
}