Merge pull request #78 from nohli/copilot/add-padding-to-navigation-bar

Add buttonSpacing parameter and improve padding documentation

Author: nohli

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 6.1.0
+
+* Add `buttonSpacing` parameter to `ResponsiveNavigationBar` for spacing between buttons
+* Improve documentation for `NavigationBarButton.padding` to clarify it controls the button's inner padding
+
 ## 6.0.0
 
 * BREAKING: Upgrade minimum Flutter version to 3.29 due to using Color.withValues() 

example/lib/main.dart

@@ -29,6 +29,7 @@ class _MyAppState extends State<MyApp> {
         bottomNavigationBar: ResponsiveNavigationBar(
           selectedIndex: _selectedIndex,
           onTabChange: changeTab,
+          buttonSpacing: 4, // Add spacing between buttons
           // showActiveButtonText: false,
           // showInactiveButtonText: true, // Show text on inactive buttons
           // borderRadius: 20,

lib/responsive_navigation_bar.dart

@@ -17,6 +17,7 @@ class ResponsiveNavigationBar extends StatelessWidget {
     this.buttonBorderRadius,
     this.padding = const EdgeInsets.all(6),
     this.outerPadding = const EdgeInsets.fromLTRB(8, 0, 8, 5),
+    this.buttonSpacing = 0,
     this.selectedIndex = 0,
     this.fontSize,
     this.textStyle = const TextStyle(fontWeight: FontWeight.bold),
@@ -90,6 +91,14 @@ class ResponsiveNavigationBar extends StatelessWidget {
   /// Padding of the bar outside [backgroundColor]
   final EdgeInsetsGeometry outerPadding;
 
+  /// Spacing between navigation buttons.
+  ///
+  /// This is useful when buttons have borders, allowing you to create
+  /// visual separation between them.
+  ///
+  /// Defaults to 0 (no spacing).
+  final double buttonSpacing;
+
   /// The selected tab.
   /// Pass your int value here.
   final int selectedIndex;
@@ -189,6 +198,12 @@ class ResponsiveNavigationBar extends StatelessWidget {
     final buttons = <Widget>[];
     for (final button in navigationBarButtons) {
       final index = navigationBarButtons.indexOf(button);
+
+      // Add spacing before button (except for the first one)
+      if (index > 0 && buttonSpacing > 0) {
+        buttons.add(SizedBox(width: buttonSpacing));
+      }
+
       buttons.add(
         _Button(
           index: index,
@@ -277,7 +292,10 @@ class NavigationBarButton {
   /// Icon of the button.
   final IconData icon;
 
-  /// Padding of the button.
+  /// Inner padding of the button (padding inside the button's background).
+  ///
+  /// This controls the space between the button's content (icon and text)
+  /// and the button's edges.
   ///
   /// If null, defaults to:
   ///

pubspec.yaml

@@ -10,7 +10,7 @@ topics:
   - responsive
   - ui
 
-version: 6.0.0
+version: 6.1.0
 
 environment:
   sdk: '>=3.6.0 <4.0.0'

test/responsive_navigation_bar_test.dart

@@ -91,6 +91,64 @@ void main() {
     expect(find.text('Profile'), findsOneWidget);
   });
 
+  testWidgets('buttonSpacing adds spacing between buttons',
+      (WidgetTester tester) async {
+    int selectedIndex = 0;
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          bottomNavigationBar: ResponsiveNavigationBar(
+            selectedIndex: selectedIndex,
+            onTabChange: (index) {
+              selectedIndex = index;
+            },
+            buttonSpacing: 8,
+            navigationBarButtons: const [
+              NavigationBarButton(text: 'Home', icon: Icons.home),
+              NavigationBarButton(text: 'Search', icon: Icons.search),
+              NavigationBarButton(text: 'Profile', icon: Icons.person),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    // Find all SizedBox widgets
+    final sizedBoxes = find.byType(SizedBox);
+    // There should be at least 2 SizedBox widgets for spacing (one between each button)
+    expect(sizedBoxes, findsWidgets);
+  });
+
+  testWidgets('padding parameter works on NavigationBarButton',
+      (WidgetTester tester) async {
+    int selectedIndex = 0;
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          bottomNavigationBar: ResponsiveNavigationBar(
+            selectedIndex: selectedIndex,
+            onTabChange: (index) {
+              selectedIndex = index;
+            },
+            navigationBarButtons: const [
+              NavigationBarButton(
+                text: 'Home',
+                icon: Icons.home,
+                padding: EdgeInsets.all(20),
+              ),
+              NavigationBarButton(text: 'Search', icon: Icons.search),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    // The widget should build without errors
+    expect(find.byType(ResponsiveNavigationBar), findsOneWidget);
+  });
+
   testWidgets('ResponsiveNavigationBar accepts buttonBorderRadius parameter',
       (WidgetTester tester) async {
     int selectedIndex = 0;