Merge pull request #9 from caseycrogers/v2

Refactored contributions to Prepare For V2

CHANGELOG.md

@@ -1,14 +1,11 @@
 # Changelog
 
-## [2.0.0] - 07/31/2024
+## [2.0.0] - 08/12/2024
 
-- Add optional size and scaleFactor parameters
+- Add optional scaleFactor parameter
 - Introduce constructors on Gutter: `Gutter.tiny`, `Gutter.small`, `Gutter.medium`, `Gutter.large`, `Gutter.extraLarge`
-- Add extension to add Gutter on Lists
+- Extend `GutterConfiguration` to allow customizing the default gutter sizes and relative scales
 - Migrate to `flutter_adaptive_scaffold` to remove deprecated package
-- Add `AdaptiveGutter` that switches `Gutter` size based on the current breakpoint
-- BREAKING CHANGE: Removal of `Gap`
-- BREAKING CHANGE: Rename `Margin` to `GutterMargin`
 
 ## [1.0.3] - 07/27/2024
 

README.md

@@ -16,51 +16,15 @@ Gutters and margins:
 2. Size the gap according to the current screen size and Material Design's corresponding breakpoint
    definition (small gap on small screens, larger gap on large screens)
 
-`Gutter.tiny`, `Gutter.small`, `Gutter.medium`, `Gutter.large` and `Gutter.extraLarge` all provide gaps that are factors of the base gutter
-size for situations where larger or smaller gaps are more appropriate. The default sizing is used on: `Gutter` or `Gutter.medium`.
+`GutterTiny`, `GutterSmall`, `GutterLarge` and `GutterExtraLarge` all provide gaps that are factors of the base gutter
+size for situations where larger or smaller gaps are more appropriate. By default, each successive
+gutter size is a factor of 2 larger than the previous.
+For convenience, alternative constructors are provided (`Gutter.tiny`, etc.) for each gutter size. 
 
 For more flexibility, you can also use the provided extension on `BuildContext` to reference the
 gutter and margin sizes directly (`context.gutter`, `context.gutterLarge`, `context.margin`, etc).
 
-It is possible to manually create a `Gutter` with a specific `size` or `scaleFactor`.
-
-```dart
-const Gutter(size: 20, scaleFactor: 3, type: GutterType.large)
-```
-
-You can use `AdaptiveGutter` to set a `Gutter` per screen size breakpoint.
-
-```dart
-const AdaptiveGutter(
-    small: Gutter.tiny(),
-    medium: Gutter.large(),
-    large: Gutter.extraLarge(),
-  )
-```
-
-On Iterable Widgets you can set a Gutter on every item:
-
-```dart
-<Widget>[
-    const Text('Test1'),
-    const Text('Test2'),
-    const Text('Test3'),
-  ].withGutter() // Optional parameter to set which Gutter size you want to use
-```
-
-Using `GutterPadding` you can add a `Widget` that insets its child by the material padding or the given padding.
-
-```dart
-const GutterPadding.only(
-    left: Gutter.medium(),
-    right: Gutter.small(),
-    top: Gutter(size: 20),
-    bottom: Gutter.medium(scaleFactor: 3),
-    child: ColoredBox(color: Colors.blue, child: Text('Child')),
-)
-```
-
-You can use `Gutter` with other packages using `GutterConfiguration` and `widgetToAxis` (see example).
+Use `Gap` to create an axis aligned spacing with an explicit size.
 
 ## Supported Widgets
 
@@ -77,9 +41,9 @@ Note that case 3 means that ANY widget with an axis is supported, however this i
 which means that the Dart compiler will not be able to tree shake out any `axis` attributes on any
 widget. This may increase your app's bundle size by a very small amount.
 
-I have a [Github issue](https://github.com/flutter/flutter/issues/133394) against Flutter to add an
-explicit axis scope to Flutter which would resolve this limitation. If you like using Flutter Gutter
-and want to see it improved, please upvote the linked issue.
+I have a [Github issue](https://github.com/flutter/flutter/issues/133394) against Flutter to add an explicit axis scope to Flutter which would
+resolve this limitation. If you like using Flutter Gutter and want to see it improved, please upvote
+the linked issue.
 
 ## Example
 
@@ -110,7 +74,7 @@ return Column(
 );
 ```
 
-To use the material break point values directly, use the extension on `context`:
+To use the gutter sizes directly, use the extension on `context`:
 
 ```dart
 return Padding(
@@ -119,22 +83,22 @@ return Padding(
 );
 ```
 
-To use `Gutter` with custom widgets that don't expose an `axis` argument, use `GutterConfiguration`:
+To use `Gutter` with custom widgets that don't expose an `axis` argument or to override the default
+gutter spacing or scaling, use `GutterConfiguration`:
 
 ```dart
 return GutterConfiguration(
   data: GutterConfigurationData(
     widgetToAxis: (widget) {
-      if (widget is BoxyFlex) {
-        // Boxy widgets expose their axes via `BoxyFlex.direction`.
-        return widget.direction;
+      if (widget is MyCustomColumn) {
+        return Axis.vertical;
       }
       return null;
     },
   ),
   child: MyCustomColumn(
     children: [
-      const Text('This widget wasn\'t supported by `Gutter` ).'),
+      const Text('This widget isn\'t supported by `Gutter` ).'),
       Gutter(),
       const Text('But with `GutterConfiguration` I can make Gutter work with any widget!'),
     ],

example/lib/main.dart

@@ -53,20 +53,15 @@ class _MyHomePageState extends State<MyHomePage> {
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               const Text('Button tapped'),
-              const Gutter.small(),
+              const GutterSmall(),
               Text(
                 _counter.toString(),
                 style: Theme.of(context).textTheme.displayMedium,
               ),
-              const Gutter.medium(),
+              const Gutter(),
               const Text('times'),
-              const Gutter.from(size: 20, scaleFactor: 3),
+              const Gap(size: 60),
               const Text('test'),
-              const AdaptiveGutter(
-                small: Gutter.tiny(),
-                medium: Gutter.large(),
-                large: Gutter.extraLarge(),
-              ),
             ],
           ),
         ),

lib/flutter_gutter.dart

@@ -1,7 +1,6 @@
-export 'src/adaptive_gutter.dart';
 export 'src/axis_aware_orientation.dart';
+export 'src/gap.dart';
 export 'src/gutter.dart';
 export 'src/gutter_configuration.dart';
 export 'src/gutter_extensions.dart';
-export 'src/gutter_margin.dart';
-export 'src/gutter_type.dart';
+export 'src/margin.dart';

lib/src/axis_aware_orientation.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../flutter_gutter.dart';
+import 'gutter_configuration.dart';
 
 /// Axis-aware widget that provides the orientation.
 class AxisAwareOrientation extends StatelessWidget {

lib/src/gap.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+import 'axis_aware_orientation.dart';
+
+/// Creates a gap along the main axis of the nearest enclosing vertically or
+/// horizontally aligned widget  (`Row`, `Column`, `Scrollable`, etc.).
+class Gap extends StatelessWidget {
+  /// Creates a gap of the given [size];
+  const Gap({super.key, required this.size});
+
+  /// The size of the gap along the main axis of the nearest enclosing
+  /// vertically or horizontally aligned multi child widget.
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return AxisAwareOrientation(
+      key: key,
+      builder: (BuildContext context, Orientation orientation) {
+        return SizedBox(
+          width: orientation == Orientation.landscape ? size : null,
+          height: orientation != Orientation.portrait ? null : size,
+        );
+      },
+    );
+  }
+}