带有居中按钮组的底部导航栏

Question

我正在尝试创建一个底部导航栏，中间有一个按钮组。按钮组两侧的 2 个图标将切换显示的屏幕。居中的按钮组有 3 个按钮，它们将作用于显示的屏幕。这类似于新的 Google 助手底栏

.

我尝试将 BottomNavigationBar 与中心项目一起使用，这是一个自定义小部件。然而，所有项目的大小最终都是相等的。任何帮助创建此布局的帮助将不胜感激。谢谢

这是我想要实现的设计

这是我现在拥有的：

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.primary,
            foregroundColor: Theme.of(context).colorScheme.secondary,
            leading: IconButton(
              icon: Image.asset(alInvertedIcon, width: 32, semanticLabel: "Home screen"),
              onPressed: () {
                push(const HomeScreen());
              },
              iconSize: 32,
            ),
            title: Image.asset(alTextInv, width: 175),
            centerTitle: true,
            actions: [
              IconButton(
                icon: const Icon(Icons.person_outlined, semanticLabel: "User Profile"),
                onPressed: () {
                  push(const ProfileScreen());
                },
                iconSize: 32,
              )
            ],
          ),
          body: bodyWidget,
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            onTap: _onItemTapped,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            backgroundColor: Theme.of(context).colorScheme.secondary,
            selectedItemColor: Theme.of(context).colorScheme.primary,
            unselectedItemColor: Colors.grey,
            currentIndex: _currentIndex,
            items: [
              const BottomNavigationBarItem(
                icon: Icon(
                  Icons.camera_alt,
                ),
                label: 'Visual',
              ),
              BottomNavigationBarItem(
                icon: SizedBox(
                  width: 300,
                  child: _actionPanel(),
                ),
                label: 'Add',
              ),
              const BottomNavigationBarItem(
                icon: Icon(
                  Icons.chat,
                ),
                label: 'Text',
              ),
            ],
          ),
      ),
    );
  }

  Widget _actionPanel() {
    return Material(
      elevation: 1.0,
      borderRadius: const BorderRadius.all(Radius.circular(25)),
      child: Row(
        children: <Widget>[
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.refresh,
            ),
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.mic,
            ),
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.camera,
            ),
          ),
        ],
      ),
    );
  }

Answer 1

尝试使用这种方式。

Widget _actionPanel() {
    return Material(
      elevation: 1.0,
      borderRadius: BorderRadius.all(Radius.circular(25)),
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 3),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            MaterialButton(
              onPressed: () {},
              shape: CircleBorder(),
              minWidth: 0,
              padding: EdgeInsets.all(5),
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              child: Icon(Icons.refresh),
            ),
            MaterialButton(
              onPressed: () {},
              shape: CircleBorder(),
              minWidth: 0,
              padding: EdgeInsets.all(5),
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              child: Icon(Icons.mic),
            ),
            MaterialButton(
              onPressed: () {},
              shape: CircleBorder(),
              minWidth: 0,
              padding: EdgeInsets.all(5),
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              child: Icon(Icons.camera),
            ),
          ],
        ),
      ),
    );
  }

带有居中按钮组的底部导航栏

Bottom Navigation bar with centered button group

flutter

flutter-layout