自定义bottomNavigationBar设计

Question

我想要这种类型的底部导航，在下面添加的照片中您可以看到。 这是我尝试的片段，请帮助

我已经尝试了很多，但是我仍然只是制作简单的底部导航栏，如下所示，如果这种导航栏有任何库，那么建议

这是我的代码捕捉，如果有参考，然后建议我，谢谢

import 'package:flutter/cupertino.dart';
import 'package:flutter/cupertino.dart' as prefix0;
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/services.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    home: HomePage(),
   );
 }
}

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
Widget _bottomAction(IconData icon) {
   return InkWell(
    onLongPress: () {},
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Icon(icon, color: Colors.grey[400]),
    ),
    onTap: () {});
  }

  @override
  Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.redAccent[400]));
  return Scaffold(
  appBar: AppBar(
      title: Text("Browse", style: TextStyle(color: Colors.white,fontSize: 
         30.0, fontWeight: FontWeight.bold)),
      backgroundColor: Colors.redAccent[400],
      elevation: 0.0,
      ),
  body: Container(
    child: Padding(
      padding: const EdgeInsets.only(top:10.0,left: 15.0,right: 15.0),
      child: TextField(
        decoration: InputDecoration(
        border: OutlineInputBorder(borderRadius: 
  BorderRadius.circular(10.0)))
      ),
    ),
  ),
  bottomNavigationBar: BottomAppBar(
    /*notchMargin: 8.0,
    shape:CircularNotchedRectangle(),*/
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        _bottomAction(FontAwesomeIcons.home),
        _bottomAction(Icons.location_on),
        SizedBox(width: 48.0),
        _bottomAction(FontAwesomeIcons.star),
        _bottomAction(Icons.person_add),
      ],
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
      shape:
          CircleBorder(side: BorderSide(color: Colors.white, width: 4.0)),
      backgroundColor: Colors.redAccent[400],
      child: Icon(Icons.add_shopping_cart, color: Colors.white),
      onPressed: () {}),
    );
    }
  }