1.顶部导航
代码如下：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: TabbedAppBarSample(),
));
}
class TabbedAppBarSample extends StatefulWidget {
@override
_TabbedAppBarSampleState createState() => _TabbedAppBarSampleState();
}
///顶部选择弹框
class _TabbedAppBarSampleState extends State<TabbedAppBarSample> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '顶部导航',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DefaultTabController(
length: choices.length,
child: Scaffold(
appBar: AppBar(
title: const Text('Tabbed AppBar'),
bottom: TabBar(
isScrollable: true,
tabs:choices.map((Choice choice){
return Tab(
text: choice.title,
icon: Icon(choice.icon),
);
}).toList(),
),
),
body: TabBarView(
children: choices.map((Choice choice){
return Padding(
padding:const EdgeInsets.all(16.0),
child: ChoiceCard(choice:choice) ,
);
}).toList(),
),
),
),
);
}
}
class Choice{
final String title;
final IconData icon;
const Choice({
this.title,
this.icon,
});
}
///初始化数据
const List<Choice> choices=const <Choice>[
const Choice(title: 'CAR',icon: Icons.directions_car),
const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
const Choice(title: 'BOAT',icon: Icons.directions_boat),
const Choice(title: 'BUS',icon: Icons.directions_bus),
const Choice(title: 'TRAIN', icon: Icons.directions_railway),
const Choice(title: 'WALK', icon: Icons.directions_walk),
];
///页面的内容
class ChoiceCard extends StatelessWidget{
const ChoiceCard({Key key, this.choice}):super(key:key);
final Choice choice;
@override
Widget build(BuildContext context) {
// TODO: implement build
final TextStyle textStyle=Theme.of(context).textTheme.display2;
return Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children:<Widget> [
Icon(choice.icon,size: 128,color: textStyle.color,),
Text(choice.title,style: textStyle,),
],
),
),
);
}
}
效果：
image
2.底部导航菜单
HomePage,SearchPage,TravelPage,MyPage页面自行定义。
import 'package:flutter/material.dart';
import 'package:home_app/HomePage.dart';
import 'package:home_app/MyPage.dart';
import 'package:home_app/SearchPage.dart';
import 'package:home_app/TravelPage.dart';
void main() {
runApp(MaterialApp(
home: TabNavigator(),
));
}
class TabNavigator extends StatefulWidget {
@override
_TabNavigatorState createState() => _TabNavigatorState();
}
class _TabNavigatorState extends State<TabNavigator> with SingleTickerProviderStateMixin {
final _defaultColor=Colors.grey;
final _activeColor=Colors.blue;
int _currentIndex=0;
var _controller=PageController(
initialPage: 0,
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _controller,
children: <Widget>[HomePage(),SearchPage(),TravelPage(),MyPage()],
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index){
_controller.jumpToPage(index);
setState(() {
_currentIndex=index;
});
},
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon:Icon(
Icons.home,
color: _defaultColor,
),
activeIcon: Icon(
Icons.home,
color: _activeColor,
),
title: Text(
'首页',
style: TextStyle(
color: _currentIndex !=0 ?_defaultColor:_activeColor),
),
),
BottomNavigationBarItem(
icon:Icon(
Icons.search,
color: _defaultColor,
),
activeIcon: Icon(
Icons.search,
color: _activeColor,
),
title: Text(
'搜索',
style: TextStyle(
color: _currentIndex !=1 ?_defaultColor:_activeColor),
),
),
BottomNavigationBarItem(
icon:Icon(
Icons.camera_alt,
color: _defaultColor,
),
activeIcon: Icon(
Icons.camera_alt,
color: _activeColor,
),
title: Text(
'旅拍',
style: TextStyle(
color: _currentIndex !=2 ?_defaultColor:_activeColor),
),
),
BottomNavigationBarItem(
icon:Icon(
Icons.account_circle,
color: _defaultColor,
),
activeIcon: Icon(
Icons.account_circle,
color: _activeColor,
),
title: Text(
'我的',
style: TextStyle(
color: _currentIndex !=3 ?_defaultColor:_activeColor),
),
),
],
),
);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_controller.dispose();
}
}
效果：
image
3.侧拉栏菜单功能
main.dart页面
import 'package:flutter/material.dart';
import 'package:home_app/TabNavigator.dart';
import 'package:home_app/TabbedAppBarSample.dart';
import 'MyHomePage.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
final appTitle = 'Drawer Demo';
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
MyHomePage页面
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key,this.title}) :super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title),),
body: Center(child: Text('My Page!'),),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children:<Widget> [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap:(){
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
onTap: (){
Navigator.pop(context);
},
)
],
),
),
);
}
}
效果：
image
