How do you create a Flutter bottom navigation with a top line on active menu item?

Question

I have the following Flutter bottom navigation bar

And I would like to add a top-line or boarder for active items like so

Is that even possible, my code is straight forward.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _tabs[_tabIndex],
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        selectedLabelStyle: TextStyle(fontSize: 14),
        selectedItemColor: Theme.of(context).accentColor,
        unselectedLabelStyle: TextStyle(fontSize: 14.0),
        unselectedItemColor: Color(0xff546481),
        type: BottomNavigationBarType.fixed,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        currentIndex: _tabIndex,
        onTap: (int index) {
          setState(() {
            _tabIndex = index;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            label: 'HOME',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.history_outlined),
            label: 'HISTORY',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            label: 'PROFILE',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings_outlined),
            label: 'SETTINGS',
          ),
        ],
      ),
    );
  }
}

Answer 1

there are some packages can achieve this effect:

titled_navigation_bar

bottomNavigationBar: TitledBottomNavigationBar(
  currentIndex: 2, // Use this to update the Bar giving a position
  onTap: (index){
    print("Selected Index: $index");
  },
  items: [
      TitledNavigationBarItem(title: Text('Home'), icon: Icons.home),
      TitledNavigationBarItem(title: Text('Search'), icon: Icons.search),
      TitledNavigationBarItem(title: Text('Bag'), icon: Icons.card_travel),
      TitledNavigationBarItem(title: Text('Orders'), icon: Icons.shopping_cart),
      TitledNavigationBarItem(title: Text('Profile'), icon: Icons.person_outline),
  ]
)

bottom_indicator_bar

class _HomePageState extends State<HomePage> {
  final List<BottomIndicatorNavigationBarItem> items = [
    BottomIndicatorNavigationBarItem(icon: Icons.home),
    BottomIndicatorNavigationBarItem(icon: Icons.search),
    BottomIndicatorNavigationBarItem(icon: Icons.settings),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Indicator Bottom Bar"),
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
          ],
        ),
      ),
      bottomNavigationBar: BottomIndicatorBar(
        onTap: (index) => {},
        items: items,
        activeColor: Colors.teal,
        inactiveColor: Colors.grey,
        indicatorColor: Colors.teal,
      ),
    );
  }
}

Answer 2

Column(
              children: [
                pageIndex == 2
                    ? Container(
                        height: 5.w,
                        width: 35.h,
                        alignment: Alignment.center,
                        // margin: const EdgeInsets.only(left: 5),
                        decoration: const BoxDecoration(
                          color: Colors.teal,
                          borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(
                                3,
                              ),
                              bottomRight: Radius.circular(3)),
                        ),
                        // height: 5,
                        // width: 35,
                      )
                    : SizedBox(
                        height: 5.w,
                        width: 35.h,
                      ),
                SizedBox(
                  height: 4.h,
                ),
                Flexible(
                  child: Container(
                    height: 25.h,
                    width: 25.w,
                    // alignment: Alignment.lerp(
                    //     Alignment.bottomLeft, Alignment.bottomRight, 1),
                    decoration: BoxDecoration(
                      // color: Colors.red,
                      border: Border.all(
                        width: 1,
                        color: Colors.black,
                      ),
                      borderRadius: const BorderRadius.all(
                        Radius.circular(20),
                      ),
                    ),
                    child: IconButton(
                        iconSize: 25,
                        alignment: Alignment.center,
                        padding: const EdgeInsets.only(top: 4, bottom: 4),
                        visualDensity:
                            const VisualDensity(horizontal: -4, vertical: -4),
                        enableFeedback: false,
                        onPressed: () {
                          setState(() {
                            pageIndex = 2;
                          });
                        },
                        icon: pageIndex == 2
                            ? Image.asset(
                                'assets/icons/icons8-alarm-50.png',
                                height: 24.h,
                                color: Colors.black,
                                // size: 35.sm,
                              )
                            : Image.asset(
                                'assets/icons/icons8-alarm-50.png',
                                color: Colors.black,
                                // size: 35.sm,
                              )),
                  ),
                ),
                pageIndex == 2
                    ? Container(
                        height: 15.h,
                        width: 60.w,
                        alignment: Alignment.lerp(
                            Alignment.centerLeft, Alignment.centerRight, 0.75),
                        child: Text(
                          'Reminder',
                          style: GoogleFonts.lato(
                            textStyle: const TextStyle(
                                fontSize: 12, fontWeight: FontWeight.bold),
                          ),
                        ),
                      )
                    : Container(),
              ],
            ),