From 0a4d5d3bf561c78db441e9c7461809e33a8da084 Mon Sep 17 00:00:00 2001 From: Agampreet Singh Date: Sat, 30 Mar 2024 12:45:29 +0530 Subject: [PATCH 1/3] added property to show inactive titles --- README.md | 1 + example/lib/main.dart | 4 +++- lib/bottom_navy_bar.dart | 49 +++++++++++++++++++++++++++++++++++----- 3 files changed, 47 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 3eabe46..c6b98e7 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ The navigation bar uses your current theme, but you are free to customize it. - `mainAxisAlignment` - use this property to change the horizontal alignment of the items. It is mostly used when you have ony two items and you want to center the items - `curve` - param to customize the item change's animation - `containerHeight` - changes the Navigation Bar's height +- `showInactiveTitle` - use this property show a Inactive titles. Defaults to false. ### BottomNavyBarItem - `icon` - the icon of this item diff --git a/example/lib/main.dart b/example/lib/main.dart index c8693b0..060b489 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -50,9 +50,11 @@ class _MyHomePageState extends State { child: Icon(Icons.add), ), bottomNavigationBar: BottomNavyBar( + showInactiveTitle: true, selectedIndex: _currentIndex, showElevation: true, itemCornerRadius: 24, + iconSize: 20, curve: Curves.easeIn, onItemSelected: (index) => setState(() => _currentIndex = index), items: [ @@ -71,7 +73,7 @@ class _MyHomePageState extends State { BottomNavyBarItem( icon: Icon(Icons.message), title: Text( - 'Messages test for mes teset test test ', + 'Messages Received', ), activeColor: Colors.pink, textAlign: TextAlign.center, diff --git a/lib/bottom_navy_bar.dart b/lib/bottom_navy_bar.dart index d93d857..34e9769 100644 --- a/lib/bottom_navy_bar.dart +++ b/lib/bottom_navy_bar.dart @@ -24,6 +24,7 @@ class BottomNavyBar extends StatelessWidget { this.itemPadding = const EdgeInsets.symmetric(horizontal: 4), this.animationDuration = const Duration(milliseconds: 270), this.mainAxisAlignment = MainAxisAlignment.spaceBetween, + this.showInactiveTitle = false, required this.items, required this.onItemSelected, this.curve = Curves.linear, @@ -86,9 +87,13 @@ class BottomNavyBar extends StatelessWidget { /// Used to configure the animation curve. Defaults to [Curves.linear]. final Curve curve; + /// Whether this navigation bar should show a Inactive titles. Defaults to false. + final bool showInactiveTitle; + @override Widget build(BuildContext context) { - final bgColor = backgroundColor ?? (Theme.of(context).bottomAppBarTheme.color ?? Colors.white); + final bgColor = backgroundColor ?? + (Theme.of(context).bottomAppBarTheme.color ?? Colors.white); return Container( decoration: BoxDecoration( @@ -124,6 +129,7 @@ class BottomNavyBar extends StatelessWidget { animationDuration: animationDuration, itemPadding: itemPadding, curve: curve, + showInactiveTitle: showInactiveTitle, ), ); }).toList(), @@ -143,6 +149,7 @@ class _ItemWidget extends StatelessWidget { final Duration animationDuration; final EdgeInsets itemPadding; final Curve curve; + final bool showInactiveTitle; const _ItemWidget({ Key? key, @@ -153,6 +160,7 @@ class _ItemWidget extends StatelessWidget { required this.itemCornerRadius, required this.animationDuration, required this.itemPadding, + required this.showInactiveTitle, this.curve = Curves.linear, }) : super(key: key); @@ -162,7 +170,13 @@ class _ItemWidget extends StatelessWidget { container: true, selected: isSelected, child: AnimatedContainer( - width: isSelected ? 130 : 50, + width: (showInactiveTitle) + ? ((isSelected) + ? MediaQuery.of(context).size.width * 0.25 + : MediaQuery.of(context).size.width * 0.2) + : ((isSelected) + ? MediaQuery.of(context).size.width * 0.3 + : MediaQuery.of(context).size.width * 0.1), height: double.maxFinite, duration: animationDuration, curve: curve, @@ -175,8 +189,14 @@ class _ItemWidget extends StatelessWidget { scrollDirection: Axis.horizontal, physics: NeverScrollableScrollPhysics(), child: Container( - width: isSelected ? 130 : 50, - padding: EdgeInsets.symmetric(horizontal: 8), + width: (showInactiveTitle) + ? ((isSelected) + ? MediaQuery.of(context).size.width * 0.25 + : MediaQuery.of(context).size.width * 0.2) + : ((isSelected) + ? MediaQuery.of(context).size.width * 0.3 + : MediaQuery.of(context).size.width * 0.1), + padding: EdgeInsets.symmetric(horizontal: 4), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, @@ -193,8 +213,24 @@ class _ItemWidget extends StatelessWidget { ), child: item.icon, ), - if (isSelected) - Expanded( + if (showInactiveTitle) + Flexible( + child: Container( + padding: itemPadding, + child: DefaultTextStyle.merge( + style: TextStyle( + color: item.activeColor, + fontWeight: FontWeight.bold, + ), + maxLines: 1, + textAlign: item.textAlign, + overflow: TextOverflow.ellipsis, + child: item.title, + ), + ), + ) + else if (isSelected) + Flexible( child: Container( padding: itemPadding, child: DefaultTextStyle.merge( @@ -204,6 +240,7 @@ class _ItemWidget extends StatelessWidget { ), maxLines: 1, textAlign: item.textAlign, + overflow: TextOverflow.ellipsis, child: item.title, ), ), From 9265be8458f4563fa7794077e5893b601854e6d4 Mon Sep 17 00:00:00 2001 From: Agampreet Singh Date: Sat, 30 Mar 2024 17:36:08 +0530 Subject: [PATCH 2/3] Updated CHANGELOG --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ea50ac..e379be6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 7.1.0-unreleased + +* Added `showInactiveTitle` param to enable titles of Inactive items + ## 7.0.0-unreleased * Added customizations options for the bottom navigation bar such as `shadowColor`, `showElevation`, `blurRadius`, `spreadRadius`, `shadowOffset`, `borderRadius`, and `itemPadding`. From c5d96246d546f7f7b8f3c26c015b932017ac8ddf Mon Sep 17 00:00:00 2001 From: Agampreet Singh Date: Sat, 30 Mar 2024 17:43:06 +0530 Subject: [PATCH 3/3] Updated CHANGELOG --- CHANGELOG.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e379be6..f234c32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,8 @@ -## 7.1.0-unreleased - -* Added `showInactiveTitle` param to enable titles of Inactive items - ## 7.0.0-unreleased * Added customizations options for the bottom navigation bar such as `shadowColor`, `showElevation`, `blurRadius`, `spreadRadius`, `shadowOffset`, `borderRadius`, and `itemPadding`. +* Added `showInactiveTitle` param to enable titles of Inactive items + ## 6.0.0