dart(freeform-gradient): feat: image caching and stuff

Signed-off-by: prescientmoon <git@moonythm.dev>

dart/freeform-gradient/README.md

@@ -1,4 +1,4 @@
-# Flutter freeform gradiant
+# Flutter freeform gradient
 
 This is a demonstration project to show usage of Flutter with Nix.
 

dart/freeform-gradient/lib/main.dart

@@ -38,18 +38,12 @@ class RootState extends State<Root> {
       theme: ThemeData(
         primarySwatch: Colors.purple,
       ),
-      home: MyHomePage(
+      home: FreeformGradient(
           title: 'Multi point gradient',
           config: MultiGradientConfig(
               distanceScaling: 1,
               blendStrength: 2,
               points: [
-                MultiGradientPoint(
-                  color: Colors.yellow,
-                  intensity: 1.0,
-                  position: vector.Vector2(
-                      1.0 / 2 + cos(angle) * 0.3, 1.0 / 2 + sin(angle) * 0.3),
-                ),
                 MultiGradientPoint(
                     color: Color(0xff6E10AB),
                     intensity: 1,
@@ -71,35 +65,66 @@ class RootState extends State<Root> {
   }
 }
 
-class MyHomePage extends StatelessWidget {
+class FreeformGradient extends StatefulWidget {
-  MyHomePage({Key key, this.title, this.config}) : super(key: key);
+  FreeformGradient({Key key, this.title, this.config}) : super(key: key);
 
   final String title;
   final MultiGradientConfig config;
 
+  FreeformGradientState createState() => FreeformGradientState();
+}
+
+class MultiGradientPoint {
+  double intensity;
+  vector.Vector4 color;
+  vector.Vector2 position;
+
+  MultiGradientPoint({Color color, this.position, this.intensity = 1}) {
+    this.color = vector.Vector4(color.red.toDouble(), color.green.toDouble(),
+        color.blue.toDouble(), color.opacity);
+  }
+}
+
+class MultiGradientConfig {
+  List<MultiGradientPoint> points;
+
+  double distanceScaling;
+  double blendStrength;
+  double opacityMultiplier = 1;
+
+  MultiGradientConfig(
+      {this.points,
+      this.distanceScaling = 1,
+      this.blendStrength = 3,
+      this.opacityMultiplier = 1});
+}
+
+class FreeformGradientState extends State<FreeformGradient> {
+  Future<ui.Image> gradient;
+
+  @override
+  void didChangeDependencies() {
+    gradient = generateImage(MediaQuery.of(context).size, widget.config);
+    super.didChangeDependencies();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return FutureBuilder<ui.Image>(
-      appBar: AppBar(
+      future: gradient,
-        title: Text(title),
+      builder: (context, snapshot) {
-      ),
+        if (snapshot.hasData) {
-      body: Center(
+          MediaQueryData query = MediaQuery.of(context);
-          child: FutureBuilder<ui.Image>(
+          return CustomPaint(
-        future: generateImage(MediaQuery.of(context).size, config),
+              child: Container(
-        builder: (context, snapshot) {
+                width: query.size.width,
-          if (snapshot.hasData) {
+                height: query.size.height,
-            MediaQueryData query = MediaQuery.of(context);
+              ),
-            return CustomPaint(
+              painter: ImagePainter(image: snapshot.data));
-                child: Container(
+        }
-                  width: query.size.width,
-                  height: query.size.height,
-                ),
-                painter: ImagePainter(image: snapshot.data));
-          }
 
-          return Text("Generating image");
+        return Text("Generating image");
-        },
+      },
-      )),
     );
   }
 }
@@ -148,31 +173,6 @@ Future<ui.Image> generateImage(Size size, MultiGradientConfig config) async {
   return completer.future;
 }
 
-class MultiGradientPoint {
-  double intensity;
-  vector.Vector4 color;
-  vector.Vector2 position;
-
-  MultiGradientPoint({Color color, this.position, this.intensity = 1}) {
-    this.color = vector.Vector4(color.red.toDouble(), color.green.toDouble(),
-        color.blue.toDouble(), color.opacity);
-  }
-}
-
-class MultiGradientConfig {
-  List<MultiGradientPoint> points;
-
-  double distanceScaling;
-  double blendStrength;
-  double opacityMultiplier = 1;
-
-  MultiGradientConfig(
-      {this.points,
-      this.distanceScaling = 1,
-      this.blendStrength = 3,
-      this.opacityMultiplier = 1});
-}
-
 double clamp(double min, double max, double value) {
   if (value < min) return min;
   if (value > max) return max;