🕌
【Flutter】pushNamedで行う固定ボトムナビゲーションバーを作る
概要
固定ボトムナビゲーションバー作成の記事は色々と探したらあるんですが、複雑で簡単に実装したいけど、なんかよくわからん。。みたいなことがあったので、色々と試行錯誤した結果 CupertinoTabBar で結構簡単に思った通りの実装ができた記事を書いていこうかなと思います。
実装
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: routes,
home: const BottomNavigation(),
);
}
}
routes
route.dart
final Map<String, WidgetBuilder> routes = {
TopPage.path: (context) => const TopPage(),
DammyPage.path: (context) => const DammyPage(),
LoginPage.path: (contex) => const LoginPage(),
};
ボトムナビゲーションバー
bottom_navigation.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '/pages/top_page.dart';
import '/pages/login_page.dart';
import 'util/routes.dart';
class BottomNavigation extends StatelessWidget {
const BottomNavigation({
Key? key,
}) : super(key: key);
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
icon: Icon(Icons.login),
),
],
),
tabBuilder: (BuildContext context, int index) {
switch (index) {
case 0:
return CupertinoTabView(
routes: routes,
builder: (context) {
return const CupertinoPageScaffold(
child: TopPage(),
);
},
);
case 1:
return CupertinoTabView(
routes: routes,
builder: (context) {
return const CupertinoPageScaffold(
child: LoginPage(),
);
},
);
default:
return CupertinoTabView(
routes: routes,
builder: (context) {
return const CupertinoPageScaffold(
child: TopPage(),
);
},
);
}
},
);
}
}
遷移方法
// ナビゲーションバーを残したまま遷移
onPressed: () => Navigator.of(context).pushName(DammyPage.path),
// ナビゲーションバーを残さない遷移
onPressed: () => Navigator.of(context, rootNavigator: true,).pushNamed(DammyPage.path),
top_page.dart
import 'package:flutter/material.dart';
class TopPage extends StatelessWidget {
const TopPage({Key? key}) : super(key: key);
static const path = '/top';
Widget build(BuildContext context) {
return SizedBox(
child: Center(
child: TextButton(
child: const Text('ナビゲーションバーを残したまま遷移'),
onPressed: () => Navigator.of(context).pushNamed(DammyPage.path),
),
),
);
}
}
Discussion