🔖
【Flutter】ナビゲーション（Drawer, Routes, Dialogs）
Drawer、Routes、Dialogsは、Flutterアプリケーションのナビゲーションやユーザーインタラクションを管理する重要な機能です。それぞれ簡単な実装例ともに紹介していきます。
参考
Drawer
Drawerは、アプリケーションのナビゲーションに使われるサイドメニューです。通常、画面の左上にあるハンバーガーアイコンをタップすると表示されます。Drawerは、以下のように実装することができます。
Drawerのサンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Drawer Example')),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(color: Colors.blue),
),
ListTile(
title: Text('Item 1'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: Center(child: Text('Hello Flutter!')),
),
);
}
}
DrawerのサンプルコードのUI
Routes
Routesは、Flutterアプリケーション内の画面遷移を管理する機能です。PageRouteを継承したクラスを利用して、遷移先の画面を定義できます。以下に例を示します。
Routesのサンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => const FirstScreen(),
'/appbar_screen': (context) => const AppBarScreen(),
'/bottom_navigation_bar_screen': (context) => const BottomNavigationBarScreen(),
'/drawer_screen': (context) => const DrawerScreen(),
},
));
}
class FirstScreen extends StatelessWidget {
const FirstScreen({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('First Screen')),
body: Center(
child: Column(
children: [
ElevatedButton(
child: const Text('Go to AppBar Screen'),
onPressed: () {
Navigator.pushNamed(context, '/appbar_screen');
},
),
ElevatedButton(
child: const Text('Go to Bottom Navigation Bar Screen'),
onPressed: () {
Navigator.pushNamed(context, '/bottom_navigation_bar_screen');
},
),
ElevatedButton(
child: const Text('Go to Drawer Screen'),
onPressed: () {
Navigator.pushNamed(context, '/drawer_screen');
},
),
],
),
)
);
}
}
RoutesのサンプルコードのUI
先ほど、紹介したAppBar, BottomNavigationBar, Drawerそれぞれの画面にFirst Screenという画面が遷移できるようにしました。
Dialogs
Dialogsは、ユーザーに情報を提供したり、状況に応じたアクションを要求するためのポップアップウィンドウです。Flutterでは、showDialog()関数を使用してダイアログを表示できます。Flutterでは、AlertDialog, SimpleDialog, showDialogが主なDialogsとして提供されています。
AlertDialog
一般的なアラートダイアログで、タイトル、コンテンツ、アクションボタン（OK、キャンセルなど）を表示できます。ユーザーに情報提供や確認、選択を求めるときに使われます。
SimpleDialog
タイトルといくつかの選択肢を含むシンプルなダイアログです。リストからアイテムを選択させる場合などに使われます。
showDialog
カスタムダイアログを表示するために使用される関数です。自由にウィジェットを組み合わせて独自のダイアログを作成することができます。
Dialogsのサンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: DialogScreen()));
}
class DialogScreen extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('AlertDialog Example')),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('AlertDialog Title'),
content: Text('This is a simple AlertDialog.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
},
child: Text('Show AlertDialog'),
),
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: Text('Choose an option'),
children: [
SimpleDialogOption(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Option 1'),
),
SimpleDialogOption(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Option 2'),
),
],
);
},
);
},
child: Text('Show SimpleDialog'),
),
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Container(
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Custom Dialog',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20),
Text('This is a custom dialog.'),
SizedBox(height: 20),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
'OK',
style: TextStyle(fontSize: 18),
),
),
],
),
),
);
},
);
},
child: Text('Show Custom Dialog'),
),
],
),
),
),
);
}
}
DialogsのサンプルコードのUI
左から順にAlertDialog, SimpleDialog, showDialogとなっています。
Discussion