From c5b24357ad0207bc5491afccf9f50ba9b2ffce57 Mon Sep 17 00:00:00 2001 From: Aryan Ahadinia <62179268+AryanAhadinia@users.noreply.github.com> Date: Wed, 14 Jul 2021 02:38:49 +0430 Subject: [PATCH 1/5] Add activeBackgroundColor --- lib/bottom_navy_bar.dart | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/bottom_navy_bar.dart b/lib/bottom_navy_bar.dart index 34e9769..643f0e0 100644 --- a/lib/bottom_navy_bar.dart +++ b/lib/bottom_navy_bar.dart @@ -181,8 +181,11 @@ class _ItemWidget extends StatelessWidget { duration: animationDuration, curve: curve, decoration: BoxDecoration( - color: - isSelected ? item.activeColor.withOpacity(0.2) : backgroundColor, + color: isSelected + ? (item.activeBackgroundColor == null + ? item.activeColor.withOpacity(0.2) + : item.activeBackgroundColor) + : backgroundColor, borderRadius: BorderRadius.circular(itemCornerRadius), ), child: SingleChildScrollView( @@ -262,6 +265,7 @@ class BottomNavyBarItem { this.activeColor = Colors.blue, this.textAlign, this.inactiveColor, + this.activeBackgroundColor, }); /// Defines this item's icon which is placed in the right side of the [title]. @@ -281,4 +285,9 @@ class BottomNavyBarItem { /// /// This will take effect only if [title] it a [Text] widget. final TextAlign? textAlign; + + /// The [BottomNavyBarItem] background color when active. + /// + /// Will fallback to [activeColor] with opacity 0.2 + final Color? activeBackgroundColor; } From f6a2101bde6e317dc1100ef33eebf5b45f5fc8ce Mon Sep 17 00:00:00 2001 From: Aryan Ahadinia <62179268+AryanAhadinia@users.noreply.github.com> Date: Wed, 14 Jul 2021 02:41:15 +0430 Subject: [PATCH 2/5] Modify Doc --- lib/bottom_navy_bar.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/bottom_navy_bar.dart b/lib/bottom_navy_bar.dart index 643f0e0..49a6bd0 100644 --- a/lib/bottom_navy_bar.dart +++ b/lib/bottom_navy_bar.dart @@ -288,6 +288,6 @@ class BottomNavyBarItem { /// The [BottomNavyBarItem] background color when active. /// - /// Will fallback to [activeColor] with opacity 0.2 + /// Will fallback to [activeColor] with opacity 0.2 when null final Color? activeBackgroundColor; } From 6a596417f926e3e34c204c702ad2567d9566a99e Mon Sep 17 00:00:00 2001 From: Aryan Ahadinia <62179268+AryanAhadinia@users.noreply.github.com> Date: Wed, 14 Jul 2021 02:43:11 +0430 Subject: [PATCH 3/5] Add activeTextColor --- lib/bottom_navy_bar.dart | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/bottom_navy_bar.dart b/lib/bottom_navy_bar.dart index 49a6bd0..9890a7d 100644 --- a/lib/bottom_navy_bar.dart +++ b/lib/bottom_navy_bar.dart @@ -222,7 +222,7 @@ class _ItemWidget extends StatelessWidget { padding: itemPadding, child: DefaultTextStyle.merge( style: TextStyle( - color: item.activeColor, + color: item.activeTextColor == null ? item.activeColor : item.activeTextColor, fontWeight: FontWeight.bold, ), maxLines: 1, @@ -265,6 +265,7 @@ class BottomNavyBarItem { this.activeColor = Colors.blue, this.textAlign, this.inactiveColor, + this.activeTextColor, this.activeBackgroundColor, }); @@ -286,6 +287,11 @@ class BottomNavyBarItem { /// This will take effect only if [title] it a [Text] widget. final TextAlign? textAlign; + /// The [title] color with higher priority than [activeColor] + /// + /// Will fallback to [activeColor] when null + final Color? activeTextColor; + /// The [BottomNavyBarItem] background color when active. /// /// Will fallback to [activeColor] with opacity 0.2 when null From cf3cdadfed2a104b864d48f0620fd83213dbefe9 Mon Sep 17 00:00:00 2001 From: Aryan Ahadinia <62179268+AryanAhadinia@users.noreply.github.com> Date: Wed, 14 Jul 2021 03:47:57 +0430 Subject: [PATCH 4/5] Using ?? syntax --- lib/bottom_navy_bar.dart | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/bottom_navy_bar.dart b/lib/bottom_navy_bar.dart index 9890a7d..cdc9209 100644 --- a/lib/bottom_navy_bar.dart +++ b/lib/bottom_navy_bar.dart @@ -182,9 +182,8 @@ class _ItemWidget extends StatelessWidget { curve: curve, decoration: BoxDecoration( color: isSelected - ? (item.activeBackgroundColor == null - ? item.activeColor.withOpacity(0.2) - : item.activeBackgroundColor) + ? (item.activeBackgroundColor ?? + item.activeColor.withOpacity(0.2)) : backgroundColor, borderRadius: BorderRadius.circular(itemCornerRadius), ), @@ -222,7 +221,7 @@ class _ItemWidget extends StatelessWidget { padding: itemPadding, child: DefaultTextStyle.merge( style: TextStyle( - color: item.activeTextColor == null ? item.activeColor : item.activeTextColor, + color: item.activeTextColor ?? item.activeColor, fontWeight: FontWeight.bold, ), maxLines: 1, From cad3a336bd2c15372689b9adf1354a6652fe2df7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ant=C3=B3nio=20Pedro?= <42675180+antonio-pedro99@users.noreply.github.com> Date: Fri, 26 Jul 2024 01:39:10 +0530 Subject: [PATCH 5/5] added changelog and tests --- CHANGELOG.md | 2 ++ README.md | 2 ++ test/bottom_navy_bar_test.dart | 16 ++++++++++++++++ 3 files changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c4b6cb..19025f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ # 7.0.0 +- Added customizations options for text and background colors of the bottom navigation bar item as `activeBackgroundColor`, `activeTextColor`. + ## 6.1.0 * Added customizations options for the bottom navigation bar such as `shadowColor`, `showElevation`, `blurRadius`, `spreadRadius`, `shadowOffset`, `borderRadius`, and `itemPadding`. diff --git a/README.md b/README.md index 425bb54..b50fd9c 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,8 @@ The navigation bar uses your current theme, but you are free to customize it. - `activeColor` - the active item's background and text color - `inactiveColor` - the inactive item's icon color - `textAlign` - property to change the alignment of the item title +- `activeBackgroundColor` - the active item's background color +- `activeTextColor` - the active item's text color ## Getting Started diff --git a/test/bottom_navy_bar_test.dart b/test/bottom_navy_bar_test.dart index 36c265c..65c1840 100644 --- a/test/bottom_navy_bar_test.dart +++ b/test/bottom_navy_bar_test.dart @@ -8,6 +8,8 @@ final List dummyItems = [ title: Text('Item 1'), activeColor: Colors.red, textAlign: TextAlign.center, + activeTextColor: Colors.white, + activeBackgroundColor: Colors.red, ), BottomNavyBarItem( icon: Icon(Icons.people), @@ -134,4 +136,18 @@ void main() { expect((containerFinder.decoration as BoxDecoration).boxShadow!.length, 1); expect((containerFinder.decoration as BoxDecoration).boxShadow!.first.blurRadius, 2); }); + + testWidgets('should have different colors for activeTextColor and activeBackground Color', (WidgetTester tester) async { + await tester.pumpWidget( + buildNavyBarBoilerplate( + onItemSelected: onItemSelected, + ), + ); + + final BottomNavyBar bottomNavyBar = tester.firstWidget(find.byType(BottomNavyBar)); + + expect(bottomNavyBar.items[0].activeColor, Colors.red); + expect(bottomNavyBar.items[0].activeTextColor, Colors.white); + expect(bottomNavyBar.items[0].activeBackgroundColor, Colors.red); + }); }