feat: add FleetFlex and related widgets (#50)

blaugold · Jun 10, 2023 · 4525bb9 · 4525bb9
1 parent 6996c59
commit 4525bb9
Show file tree

Hide file tree

Showing 14 changed files with 693 additions and 212 deletions.
diff --git a/all_lint_rules.yaml b/all_lint_rules.yaml
@@ -54,6 +54,7 @@ linter:
     - cascade_invocations
     - cast_nullable_to_non_nullable
     - close_sinks
+    - combinators_ordering
     - comment_references
     - conditional_uri_does_not_exist
     - constant_identifier_names

diff --git a/packages/fleet/README.md b/packages/fleet/README.md
@@ -138,12 +138,16 @@ The following drop-in replacements for Flutter framework widgets are provided
 for animating with Fleet:
 
 - FleetAlign
+- FleetCenter
 - FleetColoredBox
+- FleetColumn
 - FleetContainer
+- FleetFlex
 - FleetOpacity
 - FleetPadding
 - FleetPositioned
 - FleetPositionedDirectional
+- FleetRow
 - FleetSizedBox
 - FleetSliverOpacity
 - FleetSliverPadding

diff --git a/packages/fleet/example/lib/app.dart b/packages/fleet/example/lib/app.dart
@@ -0,0 +1,17 @@
+import 'package:fleet/modifiers.dart';
+import 'package:flutter/material.dart';
+
+class ExampleApp extends StatelessWidget {
+  const ExampleApp({super.key, required this.page});
+
+  final Widget page;
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: page,
+    ) //
+        .opinionatedDefaults();
+  }
+}
diff --git a/packages/fleet/example/lib/hike_graph.dart b/packages/fleet/example/lib/hike_graph.dart
@@ -2,20 +2,10 @@ import 'package:fleet/fleet.dart';
 import 'package:fleet/modifiers.dart';
 import 'package:flutter/material.dart';
 
-void main() {
-  runApp(const App());
-}
-
-class App extends StatelessWidget {
-  const App({super.key});
+import 'app.dart';
 
-  @override
-  Widget build(BuildContext context) {
-    return const MaterialApp(
-      debugShowCheckedModeBanner: false,
-      home: Page(),
-    );
-  }
+void main() {
+  runApp(const ExampleApp(page: Page()));
 }
 
 class Page extends StatefulWidget {
@@ -31,34 +21,29 @@ class _PageState extends State<Page> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      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(),
+      body: const FleetColumn(spacing: 10)([
+        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;
+            });
+          },
+        ),
+        HikeGraph(hike: hike, observation: _observation) //
+            .size(width: 400, height: 200)
+      ]) //
+          .center(),
     );
   }
 }
@@ -93,21 +78,19 @@ class HikeGraph extends StatelessWidget {
 
     return LayoutBuilder(
       builder: (context, constraints) {
-        final spacing = constraints.maxWidth / 120;
-        return Row(
+        return FleetRow(
           crossAxisAlignment: CrossAxisAlignment.end,
-          children: [
-            for (var i = 0; i < data.length; i++) ...[
-              GraphCapsule(
-                color: color,
-                height: constraints.maxHeight,
-                range: data[i],
-                overallRange: overallRange,
-              ).animation(ripple(i)),
-              if (i < data.length - 1) SizedBox(width: spacing)
-            ],
-          ],
-        );
+          spacing: constraints.maxWidth / 120,
+        )([
+          for (var i = 0; i < data.length; i++)
+            GraphCapsule(
+              color: color,
+              height: constraints.maxHeight,
+              range: data[i],
+              overallRange: overallRange,
+            ) //
+                .animation(ripple(i)),
+        ]);
       },
     );
   }
@@ -137,7 +120,8 @@ class GraphCapsule extends StatelessWidget {
         shape: const StadiumBorder(),
         color: color,
       ),
-    ).translate(Offset(0, -height * relativeRange.min));
+    ) //
+        .offset(y: -height * relativeRange.min);
   }
 }
 

diff --git a/packages/fleet/example/lib/interactive_box_fleet.dart b/packages/fleet/example/lib/interactive_box_fleet.dart
@@ -2,30 +2,20 @@ import 'package:fleet/fleet.dart';
 import 'package:fleet/modifiers.dart';
 import 'package:flutter/material.dart';
 
-void main() {
-  runApp(const MyApp());
-}
+import 'app.dart';
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const MaterialApp(
-      debugShowCheckedModeBanner: false,
-      home: MyHomePage(),
-    );
-  }
+void main() {
+  runApp(const ExampleApp(page: Page()));
 }
 
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key});
+class Page extends StatefulWidget {
+  const Page({super.key});
 
   @override
-  State<MyHomePage> createState() => _MyHomePageState();
+  State<Page> createState() => _PageState();
 }
 
-class _MyHomePageState extends State<MyHomePage> with AnimatingStateMixin {
+class _PageState extends State<Page> with AnimatingStateMixin {
   static final _distanceColorTween =
       ColorTween(begin: Colors.blue, end: Colors.green);
 
@@ -56,8 +46,8 @@ class _MyHomePageState extends State<MyHomePage> with AnimatingStateMixin {
         child: const Text('Drag me!', style: TextStyle(color: Colors.white))
             .center()
             .boxColor(_color)
-            .square(400)
-            .align(_alignment),
+            .squareDimension(400)
+            .alignmentFrom(_alignment),
       ),
     );
   }

diff --git a/packages/fleet/example/lib/interactive_box_flutter.dart b/packages/fleet/example/lib/interactive_box_flutter.dart
@@ -1,36 +1,26 @@
-import 'package:fleet/fleet.dart';
-import 'package:fleet/modifiers.dart';
 import 'package:flutter/material.dart';
 
-void main() {
-  runApp(const MyApp());
-}
+import 'app.dart';
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const MaterialApp(
-      debugShowCheckedModeBanner: false,
-      home: MyHomePage(),
-    );
-  }
+void main() {
+  runApp(const ExampleApp(page: Page()));
 }
 
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key});
+class Page extends StatefulWidget {
+  const Page({super.key});
 
   @override
-  State<MyHomePage> createState() => _MyHomePageState();
+  State<Page> createState() => _PageState();
 }
 
-class _MyHomePageState extends State<MyHomePage>
-    with SingleTickerProviderStateMixin {
+class _PageState extends State<Page> with SingleTickerProviderStateMixin {
   static final _distanceColorTween =
-      ColorTween(end: Colors.green, begin: Colors.blue);
+      ColorTween(begin: Colors.blue, end: Colors.green);
 
-  late final _controller = AnimationController(duration: 300.ms, vsync: this);
+  late final _controller = AnimationController(
+    duration: const Duration(milliseconds: 300),
+    vsync: this,
+  );
 
   final _alignmentTween = AlignmentTween(end: Alignment.center);
   final _colorTween = ColorTween(end: _distanceColorTween.begin);
@@ -82,11 +72,21 @@ class _MyHomePageState extends State<MyHomePage>
           _colorTween.begin = _color;
           _controller.forward(from: 0);
         },
-        child: const Text('Drag me!', style: TextStyle(color: Colors.white))
-            .center()
-            .boxColor(_color)
-            .square(400)
-            .align(_alignment),
+        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),
+                ),
+              ),
+            ),
+          ),
+        ),
       ),
     );
   }

diff --git a/packages/fleet/example/lib/simple_declarative_animation.dart b/packages/fleet/example/lib/simple_declarative_animation.dart
@@ -2,30 +2,20 @@ import 'package:fleet/fleet.dart';
 import 'package:fleet/modifiers.dart';
 import 'package:flutter/material.dart';
 
-void main() {
-  runApp(const MyApp());
-}
+import 'app.dart';
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const MaterialApp(
-      debugShowCheckedModeBanner: false,
-      home: MyHomePage(),
-    );
-  }
+void main() {
+  runApp(const ExampleApp(page: Page()));
 }
 
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key});
+class Page extends StatefulWidget {
+  const Page({super.key});
 
   @override
-  State<MyHomePage> createState() => _MyHomePageState();
+  State<Page> createState() => _PageState();
 }
 
-class _MyHomePageState extends State<MyHomePage> {
+class _PageState extends State<Page> {
   var _expanded = false;
 
   @override
@@ -41,7 +31,7 @@ class _MyHomePageState extends State<MyHomePage> {
           .boxColor(Colors.orange)
           .center()
           .boxColor(_expanded ? Colors.green : Colors.blue)
-          .sizeWith(_expanded ? const Size.square(400) : const Size.square(200))
+          .squareDimension(_expanded ? 400 : 200)
           .animation(Curves.ease.animation(1.s))
           .center(),
     );