Flutter底部菜单和中间凸起按钮效果实现

有好久没来更新了，不是因为停止学习，而是我正在给老婆做一个app，所以最近沉迷撸码，没有来写一些东西。正好最近撸的app需要用到底部菜单和中间凸起按钮控件，所以来简单写个东西总结一下。

今天要实现的效果类似如下图：

首先进行控件分析拆解，本次要用到的控件其实主要是两个：

1、FloatingActionButton
2、BottomAppBar

下面我们边撸码边说，整体代码不多
首先新建工程，并去掉默认的代码如下：

import 'package:flutter/material.dart';
import 'package:diamond_fab/diamond_fab.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'BottomAppBar Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'BottomAppBar Demo'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
      return new Scaffold(
      appBar: new AppBar(
        title: new Text('底部appbar'),
      ),
      body: new Center(
        child: new Text('底部appbar和中间凸起按钮展示'),
      ),
    );
  }
}

上面是个简单的app初始代码，主页面是一个带appbar和body的脚手架，如下图：

image.png

下面我们继续修改，在sacffold下面添加BottomAppBar：

bottomNavigationBar: new BottomAppBar(
        //notchMargin: 10.0,
        elevation: 10.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new IconButton(
              icon: new Icon(Icons.search),
              onPressed: () {},
            ),
            new IconButton(
              icon: new Icon(Icons.menu),
              onPressed: () {},
            ),
          ],
        ),
      ),

以上代码我们添加了一个底部appbar，其中包含一个横向布局的图标按钮，并将两个图标按钮按照头尾分布，实现左、右各一个按钮。效果图如下：

image.png

下面要实现中间凸起的按钮，我们需要继续在scaffold下面添加FloatingActionButton，代码如下：

floatingActionButton: new FloatingActionButton(
        foregroundColor: Colors.white,
        elevation: 10.0,
        onPressed: () {},
        child: new Icon(Icons.add),
      ),

我们添加一个浮动按钮，按钮阴影是10，图标是一个添加的图形，热重载后如下：

image.png
这时候发现按钮并没有在我们想要的地方，这时候我们需要引入floatingActionButtonLocation 字面意思大概可以知道是浮动按钮的位置。我们添加并配置该属性：
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
这个属性默认提供4种方案，大家可以自己试一试。
我使用的是中间停靠在底部appbar这个方案，效果如下:
image.png

整体效果基本就完成了，当你可以通过封装好的插件包对按钮进行美化和修改，比如菱形按钮，以及实现按钮和底部栏的间距实现凹口效果等。
我推荐一个：diamond_fab 大家感兴趣可以去下载了试试，效果我贴一个官方的图：

image.png