feat: add extension-based widget API (#41)

blaugold · May 21, 2023 · 8c3d283 · 8c3d283
1 parent 4d2533e
commit 8c3d283
Show file tree

Hide file tree

Showing 8 changed files with 287 additions and 152 deletions.
diff --git a/packages/fleet/example/lib/hike_graph.dart b/packages/fleet/example/lib/hike_graph.dart
@@ -30,40 +30,34 @@ class _PageState extends State<Page> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            SegmentedButton<Observation>(
-              segments: const [
-                ButtonSegment(
-                  value: Observation.heartRate,
-                  label: Text('Heart Rate'),
-                ),
-                ButtonSegment(
-                  value: Observation.pace,
-                  label: Text('Pace'),
-                ),
-              ],
-              selected: {_observation},
-              onSelectionChanged: (selection) {
-                setState(() {
-                  _observation = selection.single;
-                });
-              },
-            ),
-            const SizedBox(height: 10),
-            SizedBox(
-              width: 400,
-              height: 200,
-              child: HikeGraph(
-                hike: hike,
-                observation: _observation,
+      body: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SegmentedButton<Observation>(
+            segments: const [
+              ButtonSegment(
+                value: Observation.heartRate,
+                label: Text('Heart Rate'),
               ),
-            )
-          ],
-        ),
-      ),
+              ButtonSegment(
+                value: Observation.pace,
+                label: Text('Pace'),
+              ),
+            ],
+            selected: {_observation},
+            onSelectionChanged: (selection) {
+              setState(() {
+                _observation = selection.single;
+              });
+            },
+          ),
+          const SizedBox(height: 10),
+          HikeGraph(
+            hike: hike,
+            observation: _observation,
+          ).size(width: 400, height: 200)
+        ],
+      ).center(),
     );
   }
 }
@@ -72,15 +66,6 @@ AnimationSpec ripple(int index) {
   return Curves.bounceOut.animation().delay(Duration(milliseconds: 30 * index));
 }
 
-extension on Widget {
-  Widget animation(AnimationSpec animation) {
-    return Animated(
-      animation: animation,
-      child: this,
-    );
-  }
-}
-
 class HikeGraph extends StatelessWidget {
   const HikeGraph({
     super.key,
@@ -144,22 +129,14 @@ class GraphCapsule extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final relativeRange = range.relativeTo(overallRange);
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        AContainer(
-          height: height * relativeRange.magnitude,
-          width: 24,
-          decoration: ShapeDecoration(
-            shape: const StadiumBorder(),
-            color: color,
-          ),
-        ),
-        ASizedBox(
-          height: height * relativeRange.min,
-        )
-      ],
-    );
+    return AContainer(
+      height: height * relativeRange.magnitude,
+      width: 24,
+      decoration: ShapeDecoration(
+        shape: const StadiumBorder(),
+        color: color,
+      ),
+    ).translate(Offset(0, -height * relativeRange.min));
   }
 }
 

diff --git a/packages/fleet/example/lib/interactive_box_fleet.dart b/packages/fleet/example/lib/interactive_box_fleet.dart
@@ -52,21 +52,11 @@ class _MyHomePageState extends State<MyHomePage> with AnimatingStateMixin {
             _color = _distanceColorTween.begin!;
           });
         },
-        child: AAlign(
-          alignment: _alignment,
-          child: SizedBox.square(
-            dimension: 400,
-            child: AColoredBox(
-              color: _color,
-              child: const Center(
-                child: Text(
-                  'Drag me!',
-                  style: TextStyle(color: Colors.white),
-                ),
-              ),
-            ),
-          ),
-        ),
+        child: const Text('Drag me!', style: TextStyle(color: Colors.white))
+            .center()
+            .boxColor(_color)
+            .square(400)
+            .align(_alignment),
       ),
     );
   }

diff --git a/packages/fleet/example/lib/interactive_box_flutter.dart b/packages/fleet/example/lib/interactive_box_flutter.dart
@@ -81,21 +81,11 @@ class _MyHomePageState extends State<MyHomePage>
           _colorTween.begin = _color;
           _controller.forward(from: 0);
         },
-        child: Align(
-          alignment: _alignment,
-          child: SizedBox.square(
-            dimension: 400,
-            child: ColoredBox(
-              color: _color,
-              child: const Center(
-                child: Text(
-                  'Drag me!',
-                  style: TextStyle(color: Colors.white),
-                ),
-              ),
-            ),
-          ),
-        ),
+        child: const Text('Drag me!', style: TextStyle(color: Colors.white))
+            .center()
+            .boxColor(_color)
+            .square(400)
+            .align(_alignment),
       ),
     );
   }

diff --git a/packages/fleet/example/lib/simple_declarative_animation.dart b/packages/fleet/example/lib/simple_declarative_animation.dart
@@ -30,25 +30,16 @@ class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: Animated(
-          animation: Curves.ease.animation(1.s),
-          value: _expanded,
-          child: ASizedBox.fromSize(
-            size: _expanded ? const Size.square(400) : const Size.square(200),
-            child: AColoredBox(
-              color: _expanded ? Colors.green : Colors.blue,
-              child: Center(
-                child: TextButton(
-                  onPressed: () => setState(() => _expanded = !_expanded),
-                  style: TextButton.styleFrom(foregroundColor: Colors.white),
-                  child: const Text('Toggle'),
-                ),
-              ),
-            ),
-          ),
-        ),
-      ),
+      body: TextButton(
+        onPressed: () => setState(() => _expanded = !_expanded),
+        style: TextButton.styleFrom(foregroundColor: Colors.white),
+        child: const Text('Toggle'),
+      )
+          .center()
+          .boxColor(_expanded ? Colors.green : Colors.blue)
+          .sizeWith(_expanded ? const Size.square(400) : const Size.square(200))
+          .animation(Curves.ease.animation(1.s), value: _expanded)
+          .center(),
     );
   }
 }
diff --git a/packages/fleet/example/lib/simple_imperative_animation.dart b/packages/fleet/example/lib/simple_imperative_animation.dart
@@ -49,32 +49,26 @@ class _MyHomePageState extends State<MyHomePage> with AnimatingStateMixin {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: ASizedBox.fromSize(
-          size: _size,
-          child: AColoredBox(
-            color: _color,
-            child: Center(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: <Widget>[
-                  TextButton(
-                    onPressed: _collapse,
-                    style: TextButton.styleFrom(foregroundColor: Colors.white),
-                    child: const Text('Collapsed'),
-                  ),
-                  const SizedBox(height: 16),
-                  TextButton(
-                    style: TextButton.styleFrom(foregroundColor: Colors.white),
-                    onPressed: _expand,
-                    child: const Text('Expanded'),
-                  ),
-                ],
-              ),
-            ),
+      body: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          TextButton(
+            onPressed: _collapse,
+            style: TextButton.styleFrom(foregroundColor: Colors.white),
+            child: const Text('Collapsed'),
           ),
-        ),
-      ),
+          const SizedBox(height: 16),
+          TextButton(
+            style: TextButton.styleFrom(foregroundColor: Colors.white),
+            onPressed: _expand,
+            child: const Text('Expanded'),
+          ),
+        ],
+      ) //
+          .center()
+          .boxColor(_color)
+          .sizeWith(_size)
+          .center(),
     );
   }
 }
diff --git a/packages/fleet/example/lib/stack.dart b/packages/fleet/example/lib/stack.dart
@@ -61,25 +61,15 @@ class StackElement extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final dimension = 500.0 - (index * 70);
-    return Animated(
-      animation: _buildAnimation(),
-      value: left,
-      child: AAlign(
-        alignment: Alignment(left ? -.5 : .5, 0),
-        child: SizedBox.square(
-          dimension: 500,
-          child: Center(
-            child: SizedBox.square(
-              dimension: dimension,
-              child: Material(
-                elevation: 50,
-                color: _buildColor(),
-                borderRadius: BorderRadius.circular(dimension / 20),
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
+    return Material(
+      elevation: 50,
+      color: _buildColor(),
+      borderRadius: BorderRadius.circular(dimension / 20),
+    )
+        .square(dimension)
+        .center()
+        .square(500)
+        .align(Alignment(left ? -.5 : .5, 0))
+        .animation(_buildAnimation(), value: left);
   }
 }
diff --git a/packages/fleet/lib/fleet.dart b/packages/fleet/lib/fleet.dart
@@ -42,3 +42,4 @@ export 'src/animate.dart' show Animated, withAnimation, AnimatingStateMixin;
 export 'src/animation.dart' show AnimationSpec, AnimationFromCurveExtension;
 export 'src/common.dart' show Block;
 export 'src/duration.dart' show DurationFromIntExtension;
+export 'src/widget_extension.dart' show FleetWidgetExtension;