【Flutter】bottomNavigationBar를 커스터마이즈하고 싶지 않습니까? ? 나는 하고 싶다.
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
Reference
이 문제에 관하여(【Flutter】bottomNavigationBar를 커스터마이즈하고 싶지 않습니까? ? 나는 하고 싶다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takanorifukuyama/items/fc451c759b8df96c64e5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
                                
                                
                                
                                
                                
                                우수한 개발자 콘텐츠 발견에 전념
                                (Collection and Share based on the CC Protocol.)