How can I change the location of the label on Bottom Navigation Bar on the Flutter?

Issue

Hello I have a Bottom Navigation Bar looks like this:click here please

What I am trying to do is that changing the place of the text. I mean My Icon’s and My Label’s should look like side-by-side. (click here to see what I want to do
Looks like a simple thing to do but I couldnt find anything to do it. Thank you

And here is my code:

PageController _pageController = PageController(
initialPage: 0, ); int currentIndex = 0;
Widget childWidget = ChildWidget(
number: AvailableNumber.First, 
); @override
void dispose() {
_pageController.dispose();
super.dispose(); }
@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: arkaPlan,
  bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.shifting,
    selectedItemColor: bottomNavi,
    unselectedItemColor: arkaPlan,
    currentIndex: currentIndex,
    onTap: (value) {
      currentIndex = value;
      _pageController.animateToPage(
        value,
        duration: Duration(milliseconds: 100),
        curve: Curves.linear,
      );

      setState(() {});
    },
    items: [
      BottomNavigationBarItem(
        icon: Icon(LineIcons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.trending_up),
        label: ("Second"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.dashboard),
        label: ("Third"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.dashboard),
        label: ("Third"),
      ),
    ],
  ),
  body: PageView(
    controller: _pageController,
    onPageChanged: (page) {
      setState(() {
        currentIndex = page;
      });
    },
    children: <Widget>[
      ChildWidget(number: AvailableNumber.First),
      ChildWidget(number: AvailableNumber.Second),
      ChildWidget(number: AvailableNumber.Third),
      ChildWidget(number: AvailableNumber.Third)
    ],
  ),
);

}
}

Solution

You could use a custom package from pub.dev or use Wrap widget for icon in BottomNavigationBarItem.

Solution 1

BottomNavigationBarItem(
  icon: Wrap(
    children: [
      Icon(LineIcons.home),
      Text('Home'),
    ],
  ),
  label: '',
),

Solution 2

Here are some custom packages:

• https://pub.dev/packages/persistent_bottom_nav_bar
• https://pub.dev/packages/bottom_navy_bar
• https://pub.dev/packages/google_nav_bar

Answered By – Tirth Patel

Answer Checked By – Willingham (FlutterFixes Volunteer)