Merge pull request #90 from AryanAhadinia/issue_65

Text and background color

Author: antonio-pedro99

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`.

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
 

lib/bottom_navy_bar.dart

@@ -181,8 +181,10 @@ class _ItemWidget extends StatelessWidget {
         duration: animationDuration,
         curve: curve,
         decoration: BoxDecoration(
-          color:
-              isSelected ? item.activeColor.withOpacity(0.2) : backgroundColor,
+          color: isSelected
+              ? (item.activeBackgroundColor ??
+                  item.activeColor.withOpacity(0.2))
+              : backgroundColor,
           borderRadius: BorderRadius.circular(itemCornerRadius),
         ),
         child: SingleChildScrollView(
@@ -219,7 +221,7 @@ class _ItemWidget extends StatelessWidget {
                       padding: itemPadding,
                       child: DefaultTextStyle.merge(
                         style: TextStyle(
-                          color: item.activeColor,
+                          color: item.activeTextColor ?? item.activeColor,
                           fontWeight: FontWeight.bold,
                         ),
                         maxLines: 1,
@@ -262,6 +264,8 @@ class BottomNavyBarItem {
     this.activeColor = Colors.blue,
     this.textAlign,
     this.inactiveColor,
+    this.activeTextColor,
+    this.activeBackgroundColor,
   });
 
   /// Defines this item's icon which is placed in the right side of the [title].
@@ -281,4 +285,14 @@ 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
+  final Color? activeBackgroundColor;
 }

test/bottom_navy_bar_test.dart

@@ -8,6 +8,8 @@ final List<BottomNavyBarItem> dummyItems = <BottomNavyBarItem>[
     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<BottomNavyBar>(find.byType(BottomNavyBar));
+
+    expect(bottomNavyBar.items[0].activeColor, Colors.red);
+    expect(bottomNavyBar.items[0].activeTextColor, Colors.white);
+    expect(bottomNavyBar.items[0].activeBackgroundColor, Colors.red);
+  });
 }