stroke_morph 0.1.0 copy "stroke_morph: ^0.1.0" to clipboard
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.

example/lib/main.dart

/* 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),
            ],
          ),
        ),
      ),
    );
  }
}
0
likes
150
points
25
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

Universal morphing for stroke-based icons with spring physics — any icon morphs into any other, with rotations that emerge from the math.

Repository (GitHub)
View/report issues

Topics

#icons #animation #morphing #svg

License

unknown (license)

Dependencies

flutter

More

Packages that depend on stroke_morph