Facebookアプリケーションがリニューアルをしたようで下タブの挙動が少し変わっています。
(詳しくはお手元のFacebookアプリをご確認ください)
こんな挙動をFlutterで実現してみました。
作ったのがこちら
実装
コピペで動くようにしています。
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
TabController _tabController;
final List<Tab> tabs = <Tab>[
Tab(
icon: Icon(Icons.home),
),
Tab(
icon: Icon(Icons.my_location),
),
Tab(
icon: Icon(Icons.pages),
),
Tab(
icon: Icon(Icons.person),
),
Tab(
icon: Icon(Icons.exit_to_app),
),
Tab(
icon: Icon(Icons.card_membership),
),
];
@override
void initState() {
super.initState();
_tabController = TabController(length: tabs.length, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
),
bottomNavigationBar: SafeArea(
child: TabBar(
tabs: tabs,
controller: _tabController,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.blue, width: 5),
insets: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 40),
),
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.blue,
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 2,
indicatorPadding:
EdgeInsets.symmetric(horizontal: 18.0, vertical: 8),
labelColor: Colors.black,
),
),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: _tabController,
children: tabs.map((tab) {
return _createTab(tab);
}).toList(),
));
}
Widget _createTab(Tab tab) {
return Center(
child: Text(
"Tab",
style: TextStyle(fontSize: 24.0),
),
);
}
}
以上です。