【Flutter】bottomNavigationBar をカスタマイズしたくないか？？俺はしたいぞ。

10982 ワード
MaterialDesign BottomNavigationBar NavigationBar Dart Flutter Dart テキストリンク

2020/03/24 : 更新
2020/03/27 : 【更新】styleを調整した

学び始めたばかりなので、、よくない点があれば教えてください！！！！

UX的にも
もっとみんなにbottomNavigationBarを使ってほしいから書いた。

随時説明も追記していきたいと思ってる！

こんな感じになるよ



import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:flutter-app/view/components/AppFirebaseAuthProvider.dart';

import 'package:flutter-app/view/screen/Information.dart';
import 'package:flutter-app/view/screen/Map.dart';
import 'package:flutter-app/view/screen/Account.dart';

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {
    final auth = Provider.of<AppLineAuthProvider>(context);
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        backgroundColor: Colors.white,
          bottomNavigationBar: SafeArea(
            child: ColoredTabBar(
              color: Colors.white,
              tabBar: TabBar(
                labelColor: Colors.white,
                indicatorSize: TabBarIndicatorSize.label,
                unselectedLabelColor: Colors.indigo,
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: Colors.indigo,
                ),
                tabs: <Widget>[
                  Tab(
                    child: Container(
                      child: Center(
                        child: Row(
                            children: <Widget>[
                              Spacer(),
                              Icon(
                                Icons.place,
                              ),
                              Text("マップ"),
                              Spacer()
                            ]
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      child: Align(
                        child: Row(
                            children:<Widget>[
                              Spacer(),
                              Icon(Icons.notifications),
                              Text("お知らせ"),
                              Spacer()
                          ]
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      child: Center(
                        child: Row(
                          children: <Widget>[
                            Spacer(),
                            Icon(Icons.person),
                            Text("マイページ"),
                            Spacer()
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          body: TabBarView(
//            physics: NeverScrollableScrollPhysics(),
            children: <Widget>[
              new UmbrellaMap(),
              new UmbrellaInformation(),
              new AppSetting(),
            ]
          )),
    );
  }
}

class ColoredTabBar extends StatelessWidget implements PreferredSizeWidget {
  final PreferredSizeWidget tabBar;
  final Color color;

  ColoredTabBar({@required this.tabBar, @required this.color});

  @override
  Widget build(BuildContext context) {
    return Ink(
      color: color,
      child: tabBar,
    );
  }

  @override
  Size get preferredSize => tabBar.preferredSize;
}

参考にしました！
ありがとうございます！
https://qiita.com/mkosuke/items/3e33d71ef4de74364f87#comment-9525df20df727d3d5dae