Bottom Navigation Bar - Flutter

Question

I have searched about many ways to create bottom navigation bar in flutter, I want to ask what is the optimal way to create this bar.

Answer 1

You can use Stack with a Row and Center.The Row with 5 children and set mainAxisAlignment to MainAxisAlignment.spaceEvenly and Center for the yellow button, a Container set border with the background color. Get an idea from the code below.

Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              height: _bottomNavigationHeight,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  YourBottomNavigationItem(),
                  YourBottomNavigationItem(),
                  Expanded(
                    child: Container(),
                  ),
                  YourBottomNavigationItem(),
                  YourBottomNavigationItem(),
                ],
              ),
            ),
          ),
          Center(
            child: Container(
              width: 65,
              height: 85,
              alignment: Alignment.topCenter,
              child: Container(
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.yellow,
                    border: Border.all(color: Colors.white, width: 4)),
                child: Image.asset('plus.png'),
              ),
            ),
          )
        ],
      )