Skip to content

Commit

Permalink
update the sunflower sample to perform better at various sizes (#2836)
Browse files Browse the repository at this point in the history 
* update the sunflower sample

* improve auto-sizing of the sample

* review feedback

* update the slider

* remove the drawer from sunflower
  • Loading branch information
@devoncarew
devoncarew authored Feb 15, 2024
1 parent 7a922ef commit 2378afc
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 210 deletions.
173 changes: 68 additions & 105 deletions pkgs/samples/lib/sunflower.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
});
},
),
),
],
),
),
),
);
}
}
Loading

0 comments on commit 2378afc

Please sign in to comment.