how to make border of Bottom app bar or navigation bar go under the only selected item in Flutter?

Question

I tried to find something like this but I could not found anything

Answer 1

I've coded quickly a BottomNavigationBar that manually adds a small colored Container under the currently selected item. I think that's what you basically want. Of course you can style it according to your needs.

int index = 0;

@override
  Widget build(BuildContext context) {

return Scaffold(
  bottomNavigationBar: BottomNavigationBar(

    currentIndex: index,
    onTap: (int index) {
      setState(() {this.index = index;});
    },

    items: [
      BottomNavigationBarItem(
          label: "Item 1",
          icon: const Icon(Icons.ac_unit),
          activeIcon: Column(children: [const Icon(Icons.ac_unit), const SizedBox(height: 5), Container(color: Colors.blue, width: 7, height: 2)],)
      ),

      BottomNavigationBarItem(
          label: "Item 2",
          icon: const Icon(Icons.gamepad),
          activeIcon: Column(children: [const Icon(Icons.gamepad), const SizedBox(height: 5), Container(color: Colors.blue, width: 7, height: 2)],)),

      BottomNavigationBarItem(
        label: "Item 3",
        icon: const Icon(Icons.dark_mode),
          activeIcon: Column(children: [const Icon(Icons.dark_mode), const SizedBox(height: 5), Container(color: Colors.blue, width: 7, height: 2)],)
      ),
    ],
  ),
 );
}