【Flutter】bottomNavigationBar를 커스터마이즈하고 싶지 않습니까? ? 나는 하고 싶다.

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;
}

참고로했습니다!
감사합니다!
htps : // m / m 문지름 / ms / 3에 33d71에 f4로 74364f87 # 코멘 t-9525df20df727d3d5