【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.)