Bottom navigation bar item underline selected icon - flutter

Question

in-app bottom bar I want to add an underline for specifically selected icon. Is there any way for BottomNavigationBarItem or do I need to use a different widget?
class CustomAppBottomBar extends StatefulWidget {
const CustomAppBottomBar({Key? key}) : super(key: key);
#override
State<CustomAppBottomBar> createState() => _CustomAppBottomBarState();
}
class _CustomAppBottomBarState extends State<CustomAppBottomBar> {
int _currentIndex = 0;
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
showUnselectedLabels: true,
showSelectedLabels: true,
type: BottomNavigationBarType.fixed,
selectedItemColor: RJDriverColors.primary,
unselectedItemColor: RJDriverColors.bottomBarSecondary,
selectedFontSize: 12,
unselectedFontSize: 12,
currentIndex: _currentIndex,
onTap: (value) {
setState(() {
_currentIndex = value;
});
},

Answer 1

Try using 'TabBar' and use onTap as onChanged since they are both of type ValueChanged<int>
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late final TabController controller;
#override
void initState() {
controller = TabController(length: 4, vsync: this);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
bottomNavigationBar: TabBar(
controller: controller,
unselectedLabelColor: Colors.grey,
labelColor: Colors.blue,
onTap: (index) {},
tabs: const [
Tab(icon: Icon(Icons.menu_rounded)),
Tab(icon: Icon(Icons.piano)),
Tab(icon: Icon(Icons.car_rental_rounded)),
Tab(icon: Icon(Icons.settings_rounded)),
],
),
);
}
}

Answer 2

Using Tabbar with DefaultTabController you can get your desired result. I'm sharing a reference code you can customize it as per your need.
return DefaultTabController(
length: 4,
child: Scaffold(
body: TabBarView(
children: [
Center(
child: Text("1st Screen"),
),
Center(
child: Text("2nd Screen"),
),
Center(
child: Text("3rd Screen"),
),
Center(
child: Text("4th Screen"),
),
],
),
bottomNavigationBar: TabBar(
labelColor: Colors.red,
tabs: [
Tab(child: Icon(Icons.more_vert_sharp),),
Tab(child: Icon(Icons.local_play_sharp),),
Tab(child: Icon(Icons.directions_car),),
Tab(child: Icon(Icons.home),),
]),
),
);