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