Add lines on Bottom Navigation Bar - flutter

Question

I wanna Add this type of line on bottomNavigation Bar in flutter I want this type of blue lines when navigate or tap to another tab
this is my code
BottomNavigationBar( //Bottom navigation bar
onTap: onTabTapped,
showSelectedLabels: true,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem( //Items of BottomNavigation Bar
icon: Image.asset(
unSelectedTabs[0],
width: iconSize,
height: iconSize,
),
title:
Text("Home", style: TextStyle(color: _currentIndex == 0 ? AppTheme.mainThemeColor() : AppTheme.hintTextColor())),
activeIcon: Image.asset(
selectedTabs[0],
width: iconSize,
height: iconSize,
),
),
.........
other childItem
Please help to find out this

Answer 1

This package should help you achieve that. You may just need to customize it per your need.

Answer 2

you can use tabbar instead of BottomNavigationBar
Here is a sample
class Home extends StatefulWidget {
Home({Key key, this.title}) : super(key: key);
final String title;
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with TickerProviderStateMixin {
final PageStorageBucket bucket = PageStorageBucket();
TabController tabController;
final List<Widget> mainScreens = [
HomePage(),
FriendHomePage(),
QrPage(),
BillingHomePage(),
BorrowedHomePage(),
];
#override
void initState() {
super.initState();
tabController = TabController(initialIndex: 0, length: 5, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: SafeArea(
child: PageStorage(
child: TabBarView(
controller: tabController,
physics: NeverScrollableScrollPhysics(),
children: mainScreens,
),
bucket: bucket,
),
),
bottomNavigationBar: SafeArea(
child: Material(
color: Colors.white,
elevation: 10,
child: BottomAppBar(
notchMargin: 8,
shape: CircularNotchedRectangle(),
child: TabBar(
tabs: [
Tab(
icon: ImageIcon(
AssetImage(
'assets/bottombar/home.png',
),
),
text: 'Үндсэн'),
Tab(
icon: ImageIcon(
AssetImage(
'assets/bottombar/friends.png',
),
),
text: 'Найзууд',
),
SizedBox(),
Tab(
icon: ImageIcon(
AssetImage(
'assets/bottombar/billing.png',
),
),
text: 'Төлбөр',
),
Tab(
icon: ImageIcon(
AssetImage(
'assets/bottombar/awlaga.png',
),
),
text: 'Авлага',
)
],
labelStyle: TextStyle(fontSize: 10),
labelColor: Theme.of(context).primaryColor,
unselectedLabelColor: Theme.of(context).accentColor,
isScrollable: false,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Theme.of(context).primaryColor,
controller: tabController,
indicator: UnderlineTabIndicator(
insets: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 75.0),
borderSide:
BorderSide(color: Theme.of(context).primaryColor, width: 3),
),
),
),
),
),
floatingActionButton: Material(
elevation: 10,
color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(36)),
),
child: InkWell(
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(36)),
),
onTap: () => tabController.animateTo(2),
child: Container(
width: 65,
height: 65,
padding: EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/bottombar/qr.png',
height: 25,
fit: BoxFit.cover,
color: Theme.of(context).accentColor,
),
],
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
drawer: Drawer(),
);
}
}

Answer 3

You can do like this, this is not the best way though it worked for me.
Also this is suitable for 2-3 items
bottomNavigationBar: Column(
mainAxisSize: MainAxisSize.min,
children: [
Align(
alignment: model.currentIndex == 0
? Alignment.bottomLeft
: model.currentIndex == 1
? Alignment.bottomCenter
: Alignment.bottomRight,
child: Container(
height: 2,
color: AppColors.secondaryColor,
width: width(context) * 0.33,
),
),
BottomNavigationBar(
....
currentIndex: model.currentIndex,
onTap: (demo) {
model.setIndex(demo);
}),
],
),