GitHub：https://github.com/happy-python/flutter_demos/tree/master/tabbar_demo
效果图
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tutorial',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TabbedPage(),
);
}
}
class TabbedPage extends StatefulWidget {
@override
_TabbedPageState createState() => _TabbedPageState();
}
class _TabbedPageState extends State<TabbedPage>
with SingleTickerProviderStateMixin {
final List<Widget> tabs = <Widget>[
Icon(Icons.home),
Icon(Icons.apps),
Icon(Icons.build),
];
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: tabs.length);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TabBar"),
leading: Icon(Icons.menu),
bottom: TabBar(
controller: _tabController,
tabs: tabs,
),
),
body: TabBarView(
controller: _tabController,
children: tabs.map((Widget tab) {
return Center(child: tab);
}).toList(),
),
bottomNavigationBar: Material(
color: Colors.deepOrange,
child: TabBar(
controller: _tabController,
tabs: tabs,
),
),
);
}
}
