如何在底部导航栏中心添加带有缺口的浮动操作按钮？

Question

我正在尝试在底部导航栏的中间添加一个浮动操作按钮。问题是没有出现缺口。这是问题的图片。

我的is码是这样的

import 'package:flutter/material.dart';

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  int _selectedTab = 0;
  final _pageOptions = [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
    Text('Item 4'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color(0xffFF5555),
      ),
      home: Scaffold(
        body: _pageOptions[_selectedTab],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
          foregroundColor: Colors.white,
          elevation: 2.0,
        ),
        bottomNavigationBar: BottomAppBar(
          notchMargin: 2.0,
          shape: CircularNotchedRectangle(),
          child: SizedBox(
            height: 80,
            child: Theme(
              data: Theme.of(context).copyWith(
                  // sets the background color of the `BottomNavigationBar`
                  canvasColor: Color(0xff1B213B),

                  // sets the active color of the `BottomNavigationBar` if `Brightness` is light
                  primaryColor: Color(0xffFF5555),
                  textTheme: Theme.of(context)
                      .textTheme
                      .copyWith(caption: new TextStyle(color: Colors.white))),
              child: BottomNavigationBar(
                type: BottomNavigationBarType.fixed,
                currentIndex: _selectedTab,
                onTap: (int index) {
                  setState(() {
                    _selectedTab = index;
                  });
                },
                fixedColor: Color(0xffFF5555),
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.tv), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.card_membership), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.share), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.home), title: Text('')),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

我想在中间那个红色的 fab 图标周围添加一个缺口。我尝试了两种形状：CircularNotchedRectangle() 和 AutomaticNotchedShape 方法。但没有任何效果。大多数示例显示在“BottomAppBar”中使用“Row”。但我想使用 BottomNavigationBar。请帮助我找到解决方案

Answer 1

在BottomAppBar()，小部件中使用这个属性

clipBehavior: Clip.antiAlias,

Answer 2

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
  floatingActionButton: FloatingActionButton(...),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    clipBehavior: Clip.antiAliasWithSaveLayer,
    ...
  ),
);

Answer 3

Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      backgroundColor: Theme.of(context).backgroundColor,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton:
      SizedBox(
        width: 80.0,
        height: 80.0,
        child: FloatingActionButton(
          backgroundColor: Theme.of(context).primaryColor,
            child: Icon(Icons.add), onPressed: () {}),
      ),
      bottomNavigationBar: BottomAppBar(
          color: Theme.of(context).secondaryHeaderColor,
          child: Container(
            height: 60,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconButton(icon: Icon(Icons.settings), onPressed: () {}),
                IconButton(icon: Icon(Icons.speaker_notes_outlined), onPressed: () {}),
                SizedBox(width: 40), // The dummy child
                IconButton(icon: Icon(Icons.person), onPressed: () {}),
                IconButton(icon: Icon(Icons.email), onPressed: () {}),
              ],
            ),
          )),
    );