flutter 利用浮动按钮,实现导航栏中间放置圆形按钮效果

思路:
在Scaffold中设置浮动按钮->外包Container设置宽高来控制按钮大小->
利用浮动按钮的位置参数floatingActionButtonLocation设置值为centerDocked
定位到底部导航栏的中心靠上->设置外包容器的圆角和背景色实现按钮的边框效果
->利用按钮大小和margin等布局遮盖掉导航栏中心原来的图标->在事件中根据导航栏索引来设置页面导航

代码示例:

import "package:flutter/material.dart";
import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';

import 'page/routes.dart';


void main()
{
  runApp(App());
}

class App extends StatelessWidget{


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      //去掉右上角的debug贴纸
      debugShowCheckedModeBanner: false,
      home:Tabs(),
      //默认路由
      initialRoute:'/me' ,
      //路由跳转参数配置
      onGenerateRoute:routeInfo
      );
  }
}

class Tabs extends StatefulWidget {
  final index;
  Tabs({Key key,this.index=0}) : super(key: key);

  @override
  _TabsState createState() => _TabsState(index:this.index);
}

class _TabsState extends State<Tabs> {
  int index=0;
  _TabsState({this.index=0});
  List _page=[Home3(),Home2(),Home4()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text("hh")),
	//浮动按钮
      floatingActionButton: Container(
        child: FloatingActionButton(
            child: Icon(Icons.add),
            //事件导航
            onPressed: (){setState(() {
                this.index=1;              
            });},
            backgroundColor: this.index==1? Colors.red:Colors.yellow
          ),
          height: 60,
          width: 60,
          padding: EdgeInsets.all(8),
          margin: EdgeInsets.only(top:10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40),
            color: Colors.blue
          ),
      ),
      //设置按钮位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      body:_page[this.index],

      bottomNavigationBar: BottomNavigationBar(
        items:[ 
          BottomNavigationBarItem(//单个bar内容
            icon:Icon(Icons.home),
            title:Text("首页"),
          
          ),
          BottomNavigationBarItem(
            icon:Icon(Icons.category),
            title:Text("第二页"),
            
          ),
          BottomNavigationBarItem(
            icon:Icon(Icons.category),
            title:Text("第三页"),

          )
        ],
        currentIndex: this.index, //选中的底部bar索引
        fixedColor: Colors.green,  //选中的颜色

        onTap:(index){setState(() {
          this.index=index;
        });}, //点击bar回调,必须传入index参数,bar的索引
  
      ),
      );
  }
}


class Home extends StatelessWidget {
  const Home({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          
        ],
      ),
    );
  }
}

效果图: