代码1：
import 'package:flutter/material.dart';
import 'bottomAppBarDemo.dart';
void main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '导航栏自定义主题样本',
theme: ThemeData(
primarySwatch: Colors.red
)
home: BottomAppBarDemo(),
);
}
}
代码2：
import 'package:flutter/material.dart';
class BottomAppBarDemo extends StatefulWidget {
BottomAppBarDemo({Key key}) : super(key: key);
@override
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){
},
tooltip: '创建',
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
color: Colors.white,
onPressed: (){
},
), IconButton(
icon: Icon(Icons.hotel),
color: Colors.white,
onPressed: (){
},
)
],
),
),
);
}
}
总结：
//自定义不规则底部导航栏
//主题样式
//ThemeData(
primarySwatch: Colors.red //系统定义了18种主题样本
)
//创建不规则 底部导航栏 —— 类似悬浮球
floatingActionBuutton: FloatingActionButton(
onPressed:(){}
tooltip:’xxx’//长按提示
child：Icon(
Icons.add//系统定义好的+号按钮样式
color:colors.white //按钮+号颜色 ，背景色就是 primarySwatch: Colors.red //主题颜色
)
)//系统定义好的在Scaffold中
//不加这句话 悬浮按钮 在右下角，加了这句 悬浮按钮在正中间
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//底部工具栏
bottomNavigationBar:BottomAppBar(
shape:CircularNotchedRectangle()//要和悬浮球融合——圆形矩形缺口
)
布局：
mainAxisAlignment :MainAxisAlignment.xx
xx ——spaceBetween, 靠两边‘
xx ——spaceEvenly,靠内侧
xx———spaceAround,在中间
