teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

情報の追加

2021/07/31 13:20

投稿

endiv
endiv

スコア161

answer CHANGED
@@ -3,4 +3,35 @@
3
3
  または
4
4
  [コードで書くタイプ](https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf)
5
5
 
6
- flutter fixed bottom navigation barで調べたらたくさん出てくると思います。
6
+ flutter fixed bottom navigation barで調べたらたくさん出てくると思います。
7
+ またgetXなど状態管理のライブラリを使っても書くことができます。
8
+
9
+ getXを使ったbottomnavigationbarの例
10
+
11
+ home.dart
12
+ ```dart
13
+ stl
14
+ final NavController _navController = Get.put(NavController());
15
+ bottomNavigationBar: GetBuilder<NavController>(builder: (_)
16
+ =>BottomNavigationBar(
17
+ items: [
18
+ BottomNavigationBarItem(icon: Icon(Icons.home), label: "ホーム"),
19
+ BottomNavigationBarItem(icon: Icon(Icons.web), label: "ウェブ"),
20
+ BottomNavigationBarItem(icon: Icon(Icons.share), label: "シェア"),
21
+ ],
22
+ currentIndex: _navController.selectedIndex,
23
+ onTap: _navController.navTap,
24
+ ),
25
+ ),
26
+ ```
27
+ navController.dart
28
+ ```dart
29
+ class NavController extends GetxController{
30
+ int selectedIndex = 0;
31
+
32
+ void navTap(int value) {
33
+ selectedIndex = value;
34
+ update();
35
+ }
36
+ }
37
+ ```