Flutter 如何使bottomNavigationBar槽口透明

我想让缺口边缘间距（晶圆厂的侧面和底部条之间的空间）像android material design解释的那样，在这个小的可见圆形部分，它看起来像一个缩放背景文本。我们如何使开槽空间透明，以便看到其背后的文字？ 然而，我的底部栏并不是这样显示的

我的实现

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.white,
    child: Image.asset("images/paw.png"),
    onPressed: () {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => Map()));
    },
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: new Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          color: Colors.transparent,
          onPressed: () {},
        ),
      ],
    ),
    color: Utiles.primary_bg_color,
  ),
  body: Container(...)

脚手架(
floatingActionButtonLocation:floatingActionButtonLocation.centerDocked，
浮动操作按钮：浮动操作按钮(
背景颜色：Colors.white，
子项：Image.asset（“images/paw.png”），
已按下：（）{
导航器。推(
context，MaterialPageRoute（builder:（context）=>Map（））；
},
),
bottomNavigationBar:BottomAppBar(
形状：CircularNotchedRectangle（），
孩子：新的一排(
mainAxisSize:mainAxisSize.max，
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
图标按钮(
图标：图标（图标菜单），
颜色：颜色。透明，
按下：（）{}，
),
],
),
颜色：Utiles.primary\u bg\u颜色，
),
正文：容器（…）

您需要

extendedbody:true

在

Scaffold

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      appBar: AppBar(),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Text('text text text text text text text text text text text text text text text text text text text text ');
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 12,
        color: Colors.blue,
        child: Container(
          height: 60,
        ),
      ),
    );
  }
}

---

---

使用，

扩展体：true

从

extendBody:true确保脚手架的主体通过底部导航栏的槽口可见

BottomAppBar+BottomNavigationBar 问题标题询问了

BottomNavigationBar

，因此我添加此答案是为了帮助人们同时使用

BottomAppBar

和

BottomNavigationBar

如果未使用

底部导航栏，请忽略此项

导航栏盖缺口
默认情况下，
BottomNavigationBar
用作
BottomAppBar
中的子级，将覆盖槽口，如下所示：


我们需要去除它的颜色和阴影，让缺口显现出来

在
BottomAppBar
要保持缺口可见

BottomNavigationBar
需要：


指定了
背景色，字母为0（完全透明）

否则，将使用默认的
onBackground
主题颜色，覆盖缺口


高程：0
删除
底部导航栏下的丑陋阴影

透明的背景色使阴影可见且可怕



BottomAppBar
需要：


shape:CircularNotchedRectangle（）
显然，为了给晶圆厂留一个缺口
标高：0
去除缺口晶圆下方的轻微阴影（几乎不可见）

脚手架
需要：


extendedbody:true
允许正文内容在缺口晶圆下方流动

SafeArea
需要：


如果使用
SafeArea
，请使用
bottom:false
arg，这样我们的身体就可以在下方流过FAB下方的
BottomNavigationBar

返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
extendBody:true，//对于在FAB下流动的实体而言至关重要
正文：安全区(
儿童：中心(
子：容器(
颜色：Colors.greenAccent，
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
正文(
“您已经按了这么多次按钮：”，
),
正文(
“$”计数器“，
风格：Theme.of（context）.textTheme.headline4，
),
],
),
),
),
底部：错误，
// ↑ 安全区域（底部：false）允许脚手架主体：+extendBody:撞击底部边缘
),
// ↓ 位置：中心对接位置底部APPBAR中心的槽口FAB↓
floatingActionButtonLocation:floatingActionButtonLocation.centerDocked，
浮动操作按钮：浮动操作按钮(
按下时：\ u递增计数器，
工具提示：“增量”，
子：图标（Icons.add），
),
底部导航栏：底部应用栏（//*******应用栏）******************
形状：CircularNotchedRectangle（），//← 在底部APPBAR中为晶圆厂雕刻槽口
颜色：主题.of（上下文）.primaryColor.withAlpha（255），
// ↑ 使用.withAlpha（0）在下面调试/查看↑ 底部压条
标高：0，//← 去除晶圆下方的轻微阴影，几乎看不见
// ↑ 默认高度为8。通过设置颜色查看它↑ 阿尔法到0
子项：底部导航栏（/******导航栏*************************
高程：0，//0删除丑陋的矩形导航栏阴影
//关键的↓ 纯色会破坏晶圆缺口。使用alpha 0！
背景色：主题。背景色。原色。带Alpha（0），
//=======================================有趣的东西结束了=================
选择EditemColor:Theme.of（context）.colorScheme.onSurface，
项目：[
底部导航气压计(
图标：图标（Icons.ac\U单元），
尺码：40，
颜色：Theme.of（context.colorScheme.onBackground），
标签：‘家’，
底部导航气压计(
图标：图标（Icons.access\u报警、，
尺码：40，
颜色：Theme.of（context.colorScheme.onBackground），
标签：“编辑”）
],
),
),
);

结果
以上各部分就绪后，您应该会看到如下内容：

值得注意的是：将安全区域从你身上移除，否则这将不起作用！@Lorence Cramwinckel如果可以的话，我会将你的答案向上投票几次。
SafeArea（底部：false，）
如果你仍然需要
安全区域，但想要
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      extendBody: true, // CRITICAL for body flowing under FAB
      body: SafeArea(
        child: Center(
          child: Container(
            color: Colors.greenAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
        ),
        bottom: false,
        // ↑ SafeArea(bottom:false) allows Scaffold body:+extendBody: to hit bottom edge
      ),
      // ↓ Location: centerDocked positions notched FAB in center of BottomAppBar ↓
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar( // ****** APP BAR ******************
        shape: CircularNotchedRectangle(), // ← carves notch for FAB in BottomAppBar
        color: Theme.of(context).primaryColor.withAlpha(255),
        // ↑ use .withAlpha(0) to debug/peek underneath ↑ BottomAppBar
        elevation: 0, // ← removes slight shadow under FAB, hardly noticeable
        // ↑ default elevation is 8. Peek it by setting color ↑ alpha to 0
        child: BottomNavigationBar( // ***** NAVBAR  *************************
          elevation: 0, // 0 removes ugly rectangular NavBar shadow
          // CRITICAL ↓ a solid color here destroys FAB notch. Use alpha 0!
          backgroundColor: Theme.of(context).primaryColor.withAlpha(0),
          // ====================== END OF INTERESTING STUFF =================
          selectedItemColor: Theme.of(context).colorScheme.onSurface,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit_outlined,
                    size: 40,
                    color: Theme.of(context).colorScheme.onBackground),
                label: 'Home'),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_alarm,
                    size: 40,
                    color: Theme.of(context).colorScheme.onBackground),
                label: 'Edit')
          ],
        ),
      ),
    );