1. Dart file
import 'package:flutter/material.dart';
import 'bootom_appBar.dart';
void main (a) =>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Irregular bottom navigation'.// Customize the theme sampletheme:ThemeData( primarySwatch:Colors.lightBlue ), home:BottomAppBarDemo(), ); }}Copy the code
2, bootom_appBar. Dart
import 'package:flutter/material.dart';
import 'each_view.dart';
class BottomAppBarDemo extends StatefulWidget {
@override
_BottomAppBarDemoState createState(a) => _BottomAppBarDemoState();
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _eachView;
int _index = 0;
@override
void initState(a) { _eachView = List(); _eachView .. add(EachView('Home page')); _eachView .. add(EachView('Pages of sub-pages'));
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
// Change the page
body: _eachView[_index],
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){
return EachView('New page added');
}));
},
tooltip: 'add',
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
// The toolbar is more flexible than NavigationBar
color: Colors.lightBlue,
// Merge with fab
// Circular notch
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; }); },)],),),); }}Copy the code
3, each_view. Dart
import 'package:flutter/material.dart';
class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
_EachViewState createState(a) => _EachViewState();
}
class _EachViewState extends State<EachView> {
@override
Widget build(BuildContext context) {
returnScaffold( appBar: AppBar(title: Text(widget._title),), body: Center(child: Text(widget._title),), ); }}Copy the code
4. Effect display