flutter实战20个小demo（02）——底部不规则导航栏

在开发的过程中，我们的需求是多变的，不一定底部的导航栏都是固定的样式，可能会有一些不规则的，这节课尝试一个不规则的底部导航栏。
实现效果如下：

1、首先我们了解一下，flutter的18中主题样本

red,
pink,
purple,
deepPurple,
indigo,
blue,
lightBlue,
cyan,
teal,
green,
lightGreen,
lime,
yellow,
amber,
orange,
deepOrange,
brown,
blueGrey,


2、浮动按钮如何书写

floatingActionButton：可交互的浮动按钮
常用属性:
①、onPressed ：点击相应事件，最常用的一个属性。
②、tooltip：长按显示的提示文字，因为一般只放一个图标在上面，防止用户不知道，当我们点击长按时就会出现一段文字性解释。非常友好，不妨碍整体布局。
③、 child ：放置子元素，一般放置Icon Widget。

3、BottomAppBar 底部工具栏

BottomAppBar的常用属性:
①、color:这个不用多说，底部工具栏的颜色。
②、shape：设置底栏的形状，一般使用这个都是为了和floatingActionButton融合，所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形。
③、child ： 里边可以放置大部分Widget，让我们随心所欲的设计底栏。

代码：
1、main.dart

import 'package:flutter/material.dart';
import 'bottom_appBar_demo.dart';
void main()=> runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.yellow,
),
home:BottomAppBarDemo(),
);
}
}


2、bottom_appBar_demo.dart

import 'package:flutter/material.dart';
import 'each_view.dart';
class BottomAppBarDemo extends StatefulWidget {
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _eachView; // 创建视图数组
int _index = 0; //数组索引，通过改变索引值改变视图
void initState() {
super.initState();
_eachView = List();
_eachView..add(EachView('Home'))..add(EachView('Me'));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body:_eachView[_index],
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return EachView('New Page');
}));
},
tooltip: 'Increment',
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // 悬浮按钮和低栏进行融合
bottomNavigationBar: BottomAppBar(
color: Colors.yellow,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
color: Colors.white,
onPressed: () {
setState(() {
_index = 0;
});
}),
IconButton(
icon: Icon(Icons.airport_shuttle),
color: Colors.white,
onPressed: () {
setState(() {
_index = 1;
});
}),
],
),
),
);
}
}


3、each_view.dart

import 'package:flutter/material.dart';
class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
_EachViewState createState() => _EachViewState();
}
class _EachViewState extends State<EachView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(title:Text(widget._title)),
body: Center(child:Text(widget._title)),
);
}
}