Flutter Demo 之 底部不规则导航

import 'package:bottom_app_bar/second_page.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomAppBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/secondPage": (context) => SecondPage(),
      },
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Center(child: Text("HelloFlutter")),
      ),
      bottomNavigationBar: BottomAppBar(
        color: Theme.of(context).accentColor,
        shape: CircularNotchedRectangle(), //重点：一个圆形凹槽的矩形
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
              color: Colors.white,
              icon: Icon(Icons.home),
              onPressed: () {},
            ),
            IconButton(
              color: Colors.white,
              icon: Icon(Icons.center_focus_strong),
              onPressed: () {},
            ),
            Opacity(
              opacity: 0.0,
              child: IconButton(
                icon: Icon(Icons.backup),
                onPressed: null,
              ),
            ),
            IconButton(
              color: Colors.white,
              icon: Icon(Icons.center_focus_strong),
              onPressed: () {},
            ),
            IconButton(
              color: Colors.white,
              icon: Icon(Icons.center_focus_strong),
              onPressed: () {},
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.pushNamed(context, "/secondPage"),
        tooltip: 'enter second page',
        child: Icon(Icons.camera),
      ), // This trailing comma makes auto-formatting nicer for build methods.
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked, //重点：移动按钮位置
    );
  }
}