stroke_morph 0.1.0
stroke_morph: ^0.1.0 copied to clipboard
Universal morphing for stroke-based icons with spring physics — any icon morphs into any other, with rotations that emerge from the math.
/* The playground. Mirrors playground/ from the TypeScript repo, and exists for
the same reason CLAUDE.md gives: a morph's quality is validated by eye, not
just by asserts. Intermediate states matter as much as the endpoints, which
is why the scrubber can freeze exactly t = 0.25 / 0.5 / 0.75.
Run it: cd example && flutter run -d linux (or -d chrome) */
import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
// One import: the pack library re-exports stroke_morph, so MorphIcon and
// SpringPreset come along with MorphLucideIcons.
import 'package:stroke_morph_icons/lucide.dart';
void main() => runApp(const PlaygroundApp());
class PlaygroundApp extends StatelessWidget {
const PlaygroundApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(theme: ThemeData.light(), home: Playground());
}
}
class Playground extends StatefulWidget {
const Playground({super.key});
@override
State<Playground> createState() => _PlaygroundState();
}
class _PlaygroundState extends State<Playground>
with SingleTickerProviderStateMixin {
late AnimationController controller;
bool state = true;
@override
void initState() {
controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 300),
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: Column(
children: [
IconButton(
onPressed: () {
if (controller.value == 0.0) {
controller.forward();
} else {
controller.reverse();
}
setState(() {});
},
icon: AnimatedIcon(
size: 200,
icon: AnimatedIcons.pause_play,
progress: controller,
),
),
IconButton(
onPressed: () {
setState(() {
state = !state;
});
},
icon: MorphIcon(
icon: state
? MorphLucideIcons.calendarArrowDown
: MorphLucideIcons.star,
size: 300,
strokeWidth: .5,
preset: SpringPreset.bouncy,
// Same 100 ms the AnimatedIcon above runs at, so the two are
// comparable. The spring keeps its bounce; only its speed is
// set. (100 ms is below what ζ = 0.4 can settle in, so this
// one clamps to ~92 ms — see doc/USAGE.md#durations.)
// duration: const Duration(milliseconds: 300),
),
),
Icon(LucideIcons.heart100, size: 300),
],
),
),
),
);
}
}