图标聚集在带有浮动按钮的颤动底部导航栏中

Question

我正在使用 Inkwell 制作底部导航栏，但尽管我尝试了很多解决方案，但我无法将每个图标分开 space，我不知道是什么让我失望了。

我试过materialbuttom但结果几乎是一样的，尽管如果有任何其他选择或建议我想知道！谢谢

我添加了代码

bottomNavigationBar: BottomAppBar(
    shape: const CircularNotchedRectangle(),
    notchMargin: 10,
    child: SizedBox(
      height: 60,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () {
                      setState(() {
                        currentTab = 0;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.home),
                        Text("Home"),
                        //const Padding(padding: EdgeInsets.all(10))
                      ],
                    ),
                  ),
                ),
              ),
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () {
                      setState(() {
                        currentTab = 1;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.group),
                        Text("Grupos"),
                        //const Padding(padding: EdgeInsets.only(left: 10))
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Material(
                child: Center(
                  child: InkWell(
                      focusColor: Colors.transparent,
                      hoverColor: Colors.transparent,
                      highlightColor: Colors.transparent,
                      onTap: () {
                        setState(() {
                          currentTab = 2;
                        });
                      },
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.checklist_outlined),
                          Text("Completadas"),
                          //const Padding(padding: EdgeInsets.only(right: 10))
                        ],
                      )),
                ),
              ),
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () {
                      setState(() {
                        currentTab = 3;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.person),
                        Text("Perfil")
                        //const Padding(padding: EdgeInsets.only(left: 10))
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),

Answer 1

试试这个

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  bottomNavigationBar: BottomAppBar(
    shape: const CircularNotchedRectangle(),
    notchMargin: 10,
    child: SizedBox(
      height: 60,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Material(
            child: Center(
              child: InkWell(
                focusColor: Colors.transparent,
                hoverColor: Colors.transparent,
                highlightColor: Colors.transparent,
                onTap: () {
                  setState(() {
                    currentTab = 0;
                  });
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.home),
                    Text("Home"),
                    //const Padding(padding: EdgeInsets.all(10))
                  ],
                ),
              ),
            ),
          ),
          Material(
            child: Center(
              child: InkWell(
                focusColor: Colors.transparent,
                hoverColor: Colors.transparent,
                highlightColor: Colors.transparent,
                onTap: () {
                  setState(() {
                    currentTab = 1;
                  });
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.group),
                    Text("Grupos"),
                    //const Padding(padding: EdgeInsets.only(left: 10))
                  ],
                ),
              ),
            ),
          ),
          SizedBox(),//to make space for the floating button
          Material(
            child: Center(
              child: InkWell(
                  focusColor: Colors.transparent,
                  hoverColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                  onTap: () {
                    setState(() {
                      currentTab = 2;
                    });
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.checklist_outlined),
                      Text("Completadas"),
                      //const Padding(padding: EdgeInsets.only(right: 10))
                    ],
                  )),
            ),
          ),
          Material(
            child: Center(
              child: InkWell(
                focusColor: Colors.transparent,
                hoverColor: Colors.transparent,
                highlightColor: Colors.transparent,
                onTap: () {
                  setState(() {
                    currentTab = 3;
                  });
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.person),
                    Text("Perfil")
                    //const Padding(padding: EdgeInsets.only(left: 10))
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),

结果如下所示

Answer 2

试试下面的代码希望对你有帮助，我已经尝试了另一种方法。

您可以为

参考here一些包

return Scaffold(
  body: Center(
    child: Text(
      'Hello, World!',
      style: Theme.of(context).textTheme.headline4,
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 5,
    child: Row(
      //children inside bottom appbar
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(
          icon: Icon(
            Icons.home,
          ),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(
            Icons.group,
          ),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(
            Icons.checklist,
          ),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(
            Icons.person,
          ),
          onPressed: () {},
        ),
      ],
    ),
  ),
);

您的结果屏幕->

Answer 3

我们可以认为bottomNavigationBar包含5个小部件，其中一个小部件是FloatingActionButton。因此，我们将包含另一个小部件作为行的子项的中间项，它将覆盖 FloatingActionButton space.

虽然项目可能有不同的大小，但我们也需要正确对齐。我们可以用 Expanded 包装每个小部件。此外，您还可以使用 crossAxisAlignment: CrossAxisAlignment.stretch, 或对每个项目使用 LayoutBuilders 约束宽度进行测试。如果发现文字溢出，可以换行Flexible(child: Text()。更多关于

 Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(child: Material(...)),
    Expanded(child: Material(...)),
    Expanded(child: const SizedBox()), // this will handle the fab spacing
    Expanded(child: Material(...)),
    Expanded(child: Material(...)),

   ]

图标聚集在带有浮动按钮的颤动底部导航栏中

Icons get together in flutter bottom navigation bar with floating button

flutter

dart

flutter-bottomnavigation