Icons get together in flutter bottom navigation bar with floating button

Question

I'm making a bottom navigation bar using Inkwell, but as much as I tried solutions, I couldn't separate each icon in its respective space, I don't know what is failing me.

I tried with materialbuttom but the result was almost the same, although if there is any other alternative or suggestion I would like to know! Thankyou

I added the code

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))
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),

Solution 1

We can think bottomNavigationBar contains 5 widgets, one of the widget is FloatingActionButton. Therefor, we will include another widget as middle item of row's children that will cover FloatingActionButton space.

While items may have different sizes, we also need to align properly. We can wrap every widget with Expanded. ALso you can test with crossAxisAlignment: CrossAxisAlignment.stretch, or using LayoutBuilders constraints width on each item. If you find text overflow, you can wrap Flexible(child: Text(). More about text on overflow

 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(...)),

   ]

Solution 2

try this

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))
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),

Result looks like this

Solution 3

Try below code hope its help to you, I have try another way.

You can refer here some packages for

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: () {},
        ),
      ],
    ),
  ),
);

Your Result Screen->

Comments

[RiseHit]

Thanks a lot! the explanation helped me a lot, besides that I didn't know how to apply the expanded, it was perfect! I will read about the link you added