From 2378afce589054cefd6dd0f014cfe9b71912367c Mon Sep 17 00:00:00 2001 From: Devon Carew Date: Thu, 15 Feb 2024 10:03:18 -0800 Subject: [PATCH] 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 --- pkgs/samples/lib/sunflower.dart | 173 ++++++++++++----------------- pkgs/sketch_pad/lib/samples.g.dart | 173 ++++++++++++----------------- 2 files changed, 136 insertions(+), 210 deletions(-) diff --git a/pkgs/samples/lib/sunflower.dart b/pkgs/samples/lib/sunflower.dart index d6d509283..cc39c517b 100644 --- a/pkgs/samples/lib/sunflower.dart +++ b/pkgs/samples/lib/sunflower.dart @@ -6,19 +6,72 @@ 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 createState() { + return _SunflowerState(); + } +} - static final phi = (math.sqrt(5) + 1) / 2; +class _SunflowerState extends State { + 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; @@ -26,13 +79,16 @@ class SunflowerPainter extends CustomPainter { @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,8 +102,8 @@ 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 @@ -55,96 +111,3 @@ class SunflowerPainter extends CustomPainter { canvas.drawCircle(Offset(x, y), seedRadius, paint); } } - -class Sunflower extends StatefulWidget { - const Sunflower({super.key}); - - @override - State createState() { - return _SunflowerState(); - } -} - -class _SunflowerState extends State { - 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; - }); - }, - ), - ), - ], - ), - ), - ), - ); - } -} diff --git a/pkgs/sketch_pad/lib/samples.g.dart b/pkgs/sketch_pad/lib/samples.g.dart index 4f88ac2c7..f751e3437 100644 --- a/pkgs/sketch_pad/lib/samples.g.dart +++ b/pkgs/sketch_pad/lib/samples.g.dart @@ -910,19 +910,72 @@ 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 createState() { + return _SunflowerState(); + } +} - static final phi = (math.sqrt(5) + 1) / 2; +class _SunflowerState extends State { + 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; @@ -930,13 +983,16 @@ class SunflowerPainter extends CustomPainter { @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; @@ -950,8 +1006,8 @@ 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 @@ -959,98 +1015,5 @@ class SunflowerPainter extends CustomPainter { canvas.drawCircle(Offset(x, y), seedRadius, paint); } } - -class Sunflower extends StatefulWidget { - const Sunflower({super.key}); - - @override - State createState() { - return _SunflowerState(); - } -} - -class _SunflowerState extends State { - 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; - }); - }, - ), - ), - ], - ), - ), - ), - ); - } -} ''', );