Simplified customizations on padding / itemPadding / corners for the main container / activeOpacity / shadows

lib/bottom_navy_bar.dart

@@ -9,22 +9,36 @@ import 'package:flutter/widgets.dart';
 /// Update [selectedIndex] to change the selected item.
 /// [selectedIndex] is required and must not be null.
 class BottomNavyBar extends StatelessWidget {
-
   BottomNavyBar({
     Key? key,
     this.selectedIndex = 0,
     this.showElevation = true,
+    this.showItemElevation = false,
     this.iconSize = 24,
     this.backgroundColor,
     this.itemCornerRadius = 50,
     this.containerHeight = 56,
+    this.corner = const BorderRadius.only(
+      topLeft: Radius.circular(0),
+      topRight: Radius.circular(0),
+    ),
+    this.elevationShadow = const BoxShadow(
+      color: Colors.black12,
+      blurRadius: 2,
+    ),
+    this.itemElevationShadow = const BoxShadow(
+      color: Colors.black12,
+      blurRadius: 2,
+    ),
+    this.padding = const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
+    this.itemPadding = const EdgeInsets.symmetric(vertical: 10, horizontal: 4),
     this.animationDuration = const Duration(milliseconds: 270),
     this.mainAxisAlignment = MainAxisAlignment.spaceBetween,
     required this.items,
     required this.onItemSelected,
     this.curve = Curves.linear,
-  }) : assert(items.length >= 2 && items.length <= 5),
-       super(key: key);
+  })  : assert(items.length >= 2 && items.length <= 5),
+        super(key: key);
 
   /// The selected item is index. Changing this property will change and animate
   /// the item being selected. Defaults to zero.
@@ -40,6 +54,15 @@ class BottomNavyBar extends StatelessWidget {
   /// Whether this navigation bar should show a elevation. Defaults to true.
   final bool showElevation;
 
+  /// The shadow to be rendered when elevated
+  final BoxShadow elevationShadow;
+
+  /// Whether the items should be elevated. Defaults to false.
+  final bool showItemElevation;
+
+  /// The shadow to be rendered when elevated for each item
+  final BoxShadow itemElevationShadow;
+
   /// Use this to change the item's animation duration. Defaults to 270ms.
   final Duration animationDuration;
 
@@ -60,6 +83,15 @@ class BottomNavyBar extends StatelessWidget {
   /// Defines the bottom navigation bar height. Defaults to 56.
   final double containerHeight;
 
+  /// Defines corners, if not est, it defaults to 0
+  final BorderRadius corner;
+
+  /// Defines padding for the container, defaults to EdgeInsets.symmetric(vertical: 6, horizontal: 8)
+  final EdgeInsets padding;
+
+  /// Defines padding for the item in a container, defaults to EdgeInsets.symmetric(vertical: 10, horizontal: 4)
+  final EdgeInsets itemPadding;
+
   /// Used to configure the animation curve. Defaults to [Curves.linear].
   final Curve curve;
 
@@ -71,33 +103,32 @@ class BottomNavyBar extends StatelessWidget {
       decoration: BoxDecoration(
         color: bgColor,
         boxShadow: [
-          if (showElevation)
-            const BoxShadow(
-              color: Colors.black12,
-              blurRadius: 2,
-            ),
+          if (showElevation) elevationShadow,
         ],
+        borderRadius: corner,
       ),
       child: SafeArea(
         child: Container(
           width: double.infinity,
           height: containerHeight,
-          padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
+          padding: padding,
           child: Row(
             mainAxisAlignment: mainAxisAlignment,
             children: items.map((item) {
               var index = items.indexOf(item);
               return GestureDetector(
                 onTap: () => onItemSelected(index),
                 child: _ItemWidget(
-                  item: item,
-                  iconSize: iconSize,
-                  isSelected: index == selectedIndex,
-                  backgroundColor: bgColor,
-                  itemCornerRadius: itemCornerRadius,
-                  animationDuration: animationDuration,
-                  curve: curve,
-                ),
+                    item: item,
+                    iconSize: iconSize,
+                    isSelected: index == selectedIndex,
+                    backgroundColor: bgColor,
+                    itemCornerRadius: itemCornerRadius,
+                    animationDuration: animationDuration,
+                    curve: curve,
+                    itemPadding: itemPadding,
+                    showItemElevation: showItemElevation,
+                    itemElevationShadow: itemElevationShadow),
               );
             }).toList(),
           ),
@@ -115,6 +146,9 @@ class _ItemWidget extends StatelessWidget {
   final double itemCornerRadius;
   final Duration animationDuration;
   final Curve curve;
+  final EdgeInsets itemPadding;
+  final bool showItemElevation;
+  final BoxShadow itemElevationShadow;
 
   const _ItemWidget({
     Key? key,
@@ -124,8 +158,11 @@ class _ItemWidget extends StatelessWidget {
     required this.animationDuration,
     required this.itemCornerRadius,
     required this.iconSize,
+    required this.itemPadding,
+    required this.showItemElevation,
+    required this.itemElevationShadow,
     this.curve = Curves.linear,
-  })  : super(key: key);
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -138,9 +175,11 @@ class _ItemWidget extends StatelessWidget {
         duration: animationDuration,
         curve: curve,
         decoration: BoxDecoration(
-          color:
-              isSelected ? item.activeColor.withOpacity(0.2) : backgroundColor,
+          color: isSelected ? item.activeBackgroundColor : backgroundColor,
           borderRadius: BorderRadius.circular(itemCornerRadius),
+          boxShadow: [
+            if (showItemElevation) itemElevationShadow,
+          ],
         ),
         child: SingleChildScrollView(
           scrollDirection: Axis.horizontal,
@@ -167,7 +206,7 @@ class _ItemWidget extends StatelessWidget {
                 if (isSelected)
                   Expanded(
                     child: Container(
-                      padding: EdgeInsets.symmetric(horizontal: 4),
+                      padding: itemPadding,
                       child: DefaultTextStyle.merge(
                         style: TextStyle(
                           color: item.activeColor,
@@ -190,11 +229,11 @@ class _ItemWidget extends StatelessWidget {
 
 /// The [BottomNavyBar.items] definition.
 class BottomNavyBarItem {
-
   BottomNavyBarItem({
     required this.icon,
     required this.title,
     this.activeColor = Colors.blue,
+    this.activeBackgroundColor = const Color(0x332196F3),
     this.textAlign,
     this.inactiveColor,
   });
@@ -209,12 +248,15 @@ class BottomNavyBarItem {
   /// to [Colors.blue].
   final Color activeColor;
 
+  /// The [icon] and [title] color defined when this item is selected. Defaults
+  /// to [Colors.blue].
+  final Color activeBackgroundColor;
+
   /// The [icon] and [title] color defined when this item is not selected.
   final Color? inactiveColor;
 
   /// The alignment for the [title].
   ///
   /// This will take effect only if [title] it a [Text] widget.
   final TextAlign? textAlign;
-
 }