How to make bottom bar same like in image

how can I make bottom bar to look same like in image, top corners to be rounded and to icons have the space same like in image. here is code of bottomMenu bar how is right now.. so basically to have rounded corner and to icon have padding from left and right. but if I add whole BottomNavigationBar in padding then it not move just icons.. hope that somebody can help me to fix this..

Scaffold(        body: _handlePages[_currentIndex],        bottomNavigationBar: BottomNavigationBar(          type: BottomNavigationBarType.fixed,          currentIndex: _currentIndex,          onTap: (index) {            setState(() {              _currentIndex = index;            });          },          items: <BottomNavigationBarItem>[            _currentIndex == 0                ? BottomNavigationBarItem(                    icon: Image.asset(                      "assets/images/cam.png",                      height: 25,                      color: appColorBlue,                    ),                    label: "",                  )                : BottomNavigationBarItem(                    icon: Image.asset(                      "assets/images/cam.png",                      height: 25,                      color: appColorGrey,                    ),                    label: "",                  ),            _currentIndex == 1                ? BottomNavigationBarItem(                    icon: Image.asset(                      "assets/images/call_blue.png",                      height: 27,                      color: appColorBlue,                    ),                    label: "",                  )                : BottomNavigationBarItem(                    icon: Image.asset(                      "assets/images/call_blue.png",                      height: 27,                      color: appColorGrey,                    ),                    label: "",                  ),            _currentIndex == 2                ? BottomNavigationBarItem(                    icon: Image.asset(                      "assets/images/chat.png",                      height: 27,                      color: appColorBlue,                    ),                    label: "",                  )                : BottomNavigationBarItem(                    icon: Image.asset(                      "assets/images/chat.png",                      height: 27,                      color: appColorGrey,                    ),                    label: "",                  ),            _currentIndex == 3                ? BottomNavigationBarItem(                    icon: Container(                      height: 30,                      width: 30,                      child: new Stack(                        children: <Widget>[                          globalImage.length > 0                              ? CircleAvatar(                                  radius: 30,                                  backgroundImage: NetworkImage(globalImage),                                )                              : Container(                                  height: 30,                                  width: 30,                                  decoration: BoxDecoration(                                      color: Colors.grey[400],                                      shape: BoxShape.circle),                                  child: Padding(                                    padding: const EdgeInsets.all(10.0),                                    child: Image.asset(                                      "assets/images/user.png",                                      height: 10,                                      color: Colors.white,                                    ),                                  )),                        ],                      ),                    ),                    //  Image.asset(                    //   "assets/images/settings.png",                    //   height: 25,                    //   color: appColorBlue,                    // ),                    label: "",                  )                : BottomNavigationBarItem(                    icon: Container(                      height: 30,                      width: 30,                      child: new Stack(                        children: <Widget>[                          globalImage.length > 0                              ? CircleAvatar(                                  radius: 30,                                  backgroundImage: NetworkImage(globalImage),                                )                              : Container(                                  height: 30,                                  width: 30,                                  decoration: BoxDecoration(                                      color: Colors.grey[400],                                      shape: BoxShape.circle),                                  child: Padding(                                    padding: const EdgeInsets.all(10.0),                                    child: Image.asset(                                      "assets/images/user.png",                                      height: 10,                                      color: Colors.white,                                    ),                                  )),                        ],                      ),                    ),                    // Image.asset(                    //   "assets/images/settings.png",                    //   height: 25,                    //   color: appColorGrey,                    // ),                    label: "",                  ),          ],        ),      ),  

https://stackoverflow.com/questions/66961509/how-to-make-bottom-bar-same-like-in-image April 06, 2021 at 09:03AM