title: How can i efficiently implement centered bottom navbar design in flutter
body: <p>I am trying to implement this bottom navigation bar design using flutter for mobile, and I can't figure out what exactly I am doing wrong. I want it to be evenly spaced and centered. This is the design image<a href="https://i.stack.imgur.com/0ukkU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0ukkU.png" alt="enter image description here" /></a></p>
  <p>I tried different approaches but this is the closest output to the design I could get <a href="https://i.stack.imgur.com/TqDco.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TqDco.png" alt="enter image description here" /></a></p>
  <p>For more context, this is the code I used</p>
  <pre><code>import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:iconly/iconly.dart';
  
  class DashBoardScreen extends StatefulWidget {
    const DashBoardScreen({Key? key}) : super(key: key);
  
    @override
    _DashBoardScreenState createState() =&gt; _DashBoardScreenState();
  }
  
  class _DashBoardScreenState extends 
  State&lt;DashBoardScreen&gt; {
    var currentIndex = 0;
    @override
    Widget build(BuildContext context) {
      Size size = MediaQuery.of(context).size;
  
  return Scaffold(
    bottomNavigationBar: Container(
      height: size.width * .155,
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      child: ListView.builder(
        itemCount: 4,
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: size.width * .024),
        itemBuilder: (context, index) =&gt; InkWell(
          onTap: () {
            setState(
              () {
                currentIndex = index;
              },
            );
          },
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              AnimatedContainer(
                duration: Duration(milliseconds: 1500),
                curve: Curves.fastLinearToSlowEaseIn,
                margin: EdgeInsets.only(
                  bottom: index == currentIndex ? 0 : size.width * .029,
                  right: size.width * .0422,
                  left: size.width * .0422,
                ),
                width: size.width * .128,
                height: index == currentIndex ? 4 : 0,
                decoration: BoxDecoration(
                  color: Color(0xff25307e),
                ),
              ),
              Icon(
                index == currentIndex
                    ? listOfIconsBold[index]
                    : listOfIconsLight[index],
                size: size.width * .076,
                color: index == currentIndex
                    ? Color(0xff25307e)
                    : Colors.black38,
              ),
              Text(
                listOfText[index],
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                  color: index == currentIndex
                      ? Color(0xff25307e)
                      : Colors.black38,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
    }
  
    List&lt;IconData&gt; listOfIconsLight = [
  IconlyLight.category,
  IconlyLight.chart,
  IconlyLight.document,
  IconlyLight.work
    ];
     List&lt;IconData&gt; listOfIconsBold = [
       IconlyBold.category,
       IconlyBold.chart,
  
       IconlyBold.document,
       IconlyBold.work
     
  ];
  
        List&lt;String&gt; listOfText = ['Dashboard', 'Analytics', 'My Products', 'Manage'];
   }
  </code></pre>