728x90
android DrawerLayout 을 구글 검색하면 어떤 사항인지 정보가 나온다.
https://api.flutter.dev/flutter/material/Drawer-class.html 를 검색하면 매뉴얼로 제공되는 정보를 알 수 있다.
Drawer Navigation 메뉴는 앱의 Main UI 로 구현하는 경우가 많다.
StatefulWidget 으로 전환하는 것도 쉽게 가능하다. StatelessWidget 에 마우스를 놓고 변경하면 된다.
사용자 반응 앱을 만들려면 StatefulWidget 으로 구성한다.
|
// lib 폴더에서 dartfile을 선택하고 drawer 입력하면 drawer.dart 파일이 생성된다.
import 'package:flutter/material.dart';
// stless 입력하고 TAB키를 누르면 자동완성 Class 가 생성된다.
class Drawer extends StatelessWidget {
const Drawer({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container();
}
}
|
main.dart 파일에서 Class 분리하여 별도 파일 생성하여 처리한다.
|
import 'package:codingapple/drawer.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const DrawerMenu(title: 'Drawer Demo'),
);
}
}
|
drawer.dart
|
// lib 폴더에서 dartfile을 선택하고 drawer 입력하면 drawer.dart 파일이 생성된다.
import 'package:flutter/material.dart';
import 'dialog.dart';
// stful 입력하고 TAB키를 누르면 자동완성 Class 가 생성된다.
// 예약어에 해당하는 클래스명은 피한다.
class DrawerMenu extends StatefulWidget {
const DrawerMenu({Key? key, required this.title}) : super(key: key);
final String title; // 부모 위젯으로부터 전달받은 변수
@override
State<DrawerMenu> createState() => _DrawerMenuState();
}
class _DrawerMenuState extends State<DrawerMenu> {
@override
Widget build(BuildContext context) {
// https://api.flutter.dev/flutter/material/Drawer-class.html 에서
// 복사하여 Container를 덮어쓰기 한다.
// 아래 코드와 비교하면 약간 수정된 사항이 있으니 참고하시라.
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[ // const <Widget> 에서 const 를 삭제한다.
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.message),
title: Text('Messages'),
tileColor: Colors.red,
trailing: Icon(Icons.more_vert),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text(
'Profile',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.blue,
),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LView(title: '연락처 앱'),
),
);
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Two-line ListTile'),
subtitle: Text('Here is a second line'),
trailing: Icon(Icons.more_vert),
isThreeLine: true,
),
],
),
),
);
}
}
|
Android 앱 개발시 사용하는 에뮬레이터를 공용으로 사용할 수 있으며, 위 코드의 결과 UI 이다.
'Flutter 앱 > Layout' 카테고리의 다른 글
| Flutter Container 위젯 (0) | 2022.06.24 |
|---|---|
| Flutter CustomScrollView (0) | 2022.06.21 |
| Flutter Layout (0) | 2021.12.26 |
| Flutter Theme(테마) 변경 (0) | 2021.12.24 |
| Flutter BottomNavigationBar 예제 (0) | 2021.12.22 |
Link2Me