update the sunflower sample to perform better at various sizes (#2836)

* update the sunflower sample

* improve auto-sizing of the sample

* review feedback

* update the slider

* remove the drawer from sunflower

Author: devoncarew

pkgs/samples/lib/sunflower.dart

@@ -6,33 +6,89 @@ import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
 
-const Color primaryColor = Colors.orange;
-const TargetPlatform platform = TargetPlatform.android;
-
 void main() {
   runApp(const Sunflower());
 }
 
-class SunflowerPainter extends CustomPainter {
-  static const seedRadius = 2.0;
-  static const scaleFactor = 4;
-  static const tau = math.pi * 2;
+class Sunflower extends StatefulWidget {
+  const Sunflower({super.key});
+
+  @override
+  State<StatefulWidget> createState() {
+    return _SunflowerState();
+  }
+}
 
-  static final phi = (math.sqrt(5) + 1) / 2;
+class _SunflowerState extends State<Sunflower> {
+  double seeds = 100.0;
+
+  int get seedCount => seeds.floor();
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Scaffold(
+        appBar: AppBar(
+          title: const Text('Sunflower'),
+        ),
+        body: Column(
+          children: [
+            Expanded(
+              child: LayoutBuilder(builder: (context, constraints) {
+                return SizedBox(
+                  width: constraints.maxWidth,
+                  height: constraints.maxHeight,
+                  child: CustomPaint(
+                    painter: SunflowerPainter(seedCount),
+                  ),
+                );
+              }),
+            ),
+            Text('Showing $seedCount seeds'),
+            Container(
+              constraints: const BoxConstraints.tightFor(width: 300),
+              padding: const EdgeInsets.only(bottom: 12),
+              child: Slider(
+                min: 20,
+                max: 2000,
+                value: seeds,
+                onChanged: (newValue) {
+                  setState(() {
+                    seeds = newValue;
+                  });
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class SunflowerPainter extends CustomPainter {
+  static const Color primaryColor = Colors.orange;
+  static const double seedRadius = 2.0;
+  static const double tau = math.pi * 2;
+  static final double phi = (math.sqrt(5) + 1) / 2;
 
   final int seeds;
 
   SunflowerPainter(this.seeds);
 
   @override
   void paint(Canvas canvas, Size size) {
-    final center = size.width / 2;
+    final scaleFactor = 4 * size.shortestSide / 400;
+
+    final centerX = size.width / 2;
+    final centerY = size.height / 2;
 
     for (var i = 0; i < seeds; i++) {
       final theta = i * tau / phi;
       final r = math.sqrt(i) * scaleFactor;
-      final x = center + r * math.cos(theta);
-      final y = center - r * math.sin(theta);
+      final x = centerX + r * math.cos(theta);
+      final y = centerY - r * math.sin(theta);
       final offset = Offset(x, y);
       if (!size.contains(offset)) {
         continue;
@@ -46,105 +102,12 @@ class SunflowerPainter extends CustomPainter {
     return oldDelegate.seeds != seeds;
   }
 
-  // Draw a small circle representing a seed centered at (x,y).
   void drawSeed(Canvas canvas, double x, double y) {
+    // Draw a small circle representing a seed centered at (x,y).
     final paint = Paint()
       ..strokeWidth = 2
       ..style = PaintingStyle.fill
       ..color = primaryColor;
     canvas.drawCircle(Offset(x, y), seedRadius, paint);
   }
 }
-
-class Sunflower extends StatefulWidget {
-  const Sunflower({super.key});
-
-  @override
-  State<StatefulWidget> createState() {
-    return _SunflowerState();
-  }
-}
-
-class _SunflowerState extends State<Sunflower> {
-  double seeds = 100.0;
-
-  int get seedCount => seeds.floor();
-
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      debugShowCheckedModeBanner: false,
-      theme: ThemeData().copyWith(
-        platform: platform,
-        brightness: Brightness.dark,
-        sliderTheme: SliderThemeData.fromPrimaryColors(
-          primaryColor: primaryColor,
-          primaryColorLight: primaryColor,
-          primaryColorDark: primaryColor,
-          valueIndicatorTextStyle: const DefaultTextStyle.fallback().style,
-        ),
-      ),
-      home: Scaffold(
-        appBar: AppBar(
-          title: const Text('Sunflower'),
-        ),
-        drawer: Drawer(
-          child: ListView(
-            children: const [
-              DrawerHeader(
-                child: Center(
-                  child: Text(
-                    'Sunflower 🌻',
-                    style: TextStyle(fontSize: 32),
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-        body: Container(
-          constraints: const BoxConstraints.expand(),
-          decoration: BoxDecoration(
-            border: Border.all(
-              color: Colors.transparent,
-            ),
-          ),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            mainAxisAlignment: MainAxisAlignment.start,
-            children: [
-              Container(
-                decoration: BoxDecoration(
-                  border: Border.all(
-                    color: Colors.transparent,
-                  ),
-                ),
-                child: SizedBox(
-                  width: 400,
-                  height: 400,
-                  child: CustomPaint(
-                    painter: SunflowerPainter(seedCount),
-                  ),
-                ),
-              ),
-              Text('Showing $seedCount seeds'),
-              ConstrainedBox(
-                constraints: const BoxConstraints.tightFor(width: 300),
-                child: Slider.adaptive(
-                  min: 20,
-                  max: 2000,
-                  value: seeds,
-                  onChanged: (newValue) {
-                    setState(() {
-                      seeds = newValue;
-                    });
-                  },
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}