代码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: (){
},
)
],
),
),
);
}
}
总结：
//自定义不规则底部导航栏
//不加这句话 悬浮按钮 在右下角，加了这句 悬浮按钮在正中间
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//创建悬浮球
//ThemeData(
primarySwatch: Colors.red //悬浮球内部颜色
)
扫描二维码关注公众号，回复：
8473680 查看本文章
布局：
mainAxisAlignment :MainAxisAlignment.xx
xx ——spaceBetween, 靠两边‘
xx ——spaceEvenly,靠内侧
xx———spaceAround,在中间