如何将中半图像设置为底部导航栏？答案

【问题标题】：How to set middle half Image to bottom navigation bar?如何将中半图像设置为底部导航栏？
【发布时间】：2020-02-05 05:10:33
【问题描述】：

如何将图像设置在底部导航栏的中间，看起来它与底部视图相连。

【问题讨论】：

请分享您想要实现的目标
我已经分享了底视图的图片。
你想用那个视图做什么？
在上面使用堆栈（根据设计）图像并将位置放置到特定小部件或使用浮动按钮stackoverflow.com/questions/49299457/…
共享代码，以便根据您的代码轻松处理

标签： flutter flutter-layout

【解决方案1】：

您可以在下面复制粘贴运行完整代码
你可以使用

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
...
bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),

详情可以参考https://proandroiddev.com/flutter-how-to-using-bottomappbar-75d53426f5af

工作演示

代码sn-p

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home: BottomAppBarPage(),
    );
  }
}

class BottomAppBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: const Text('Bottom App Bar')),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：