How I Harnessed AI to Craft a Complex Flutter Animation from Scratch

After a previous article on AI‑generated Flutter animations, the author set out to create a more concrete and visually striking effect inspired by a game scene, using AI to assist the entire pipeline.

Iterative Prompting and AI Limitations

The process began by feeding an original formation image to the AI, which produced unusable results due to vague prompts and the model's inability to directly interpret the picture. By enriching the prompt with detailed descriptions and guiding the AI with coordinate hints, the model gradually learned the composition, eventually producing a recognizable layout after more than 50 iterations.

Adding Audio and Final Adjustments

Incorporating background music enhanced the overall feel. The author repeatedly corrected the AI’s code errors, clarified instructions, and manually intervened when the AI deviated, ultimately achieving a satisfactory animation after extensive fine‑tuning.

When the AI’s context was lost, it sometimes generated unrelated outputs, such as requesting a different tool instead of fixing the code.

Code Implementation Overview

The final implementation relies on CustomPaint, AnimationController, and Matrix4, organized into four core components:

Multi‑stage animation scheduling

Mathematical drawing principles

3D space transformation

Character compositing effects

Multi‑stage Animation Scheduling

Four sequential controllers simulate the animation flow: _drawController (4 s): lines grow outward from the center. _rotateController (3 s): rapid rotation after drawing completes. _tiltController (1.5 s): the 2D pattern tilts into a 3D perspective with a brightness burst. _characterController (1 s): the character appears with light effects.

Sub‑steps are refined using CurvedAnimation and Interval to control the drawing progress:

0‑20 %: draw central circle.

20‑50 %: draw inner radiating lines.

50‑75 %: draw snow‑flake‑like hexagonal components.

75‑100 %: draw outer extending lines.

Polar Coordinates for Precise Layout

The formation is radially symmetric, so the drawing logic uses polar coordinates. The helper function converts polar values to screen offsets:

Offset _polarToOffset(Offset center, double radius, double angle) {
  return Offset(
    center.dx + radius * math.cos(angle),
    center.dy + radius * math.sin(angle),
  );
}

Each of the 12 positions is spaced 30° apart (360°/12). The angle is adjusted by –90° to start at the 12‑o’clock direction and converted to radians. Long and short branches alternate to create a snow‑flake pattern:

final bool isLongBranch = (i % 2 == 0);
final double currentHexRadius = isLongBranch ? rLongHex : rShortHex;

Key points such as start , hexInnerTarget , hexOuter , and endInnerTarget are computed with _polarToOffset and then used to draw lines and hexagons.

Text labels are rotated with canvas.rotate to keep them upright at each angle.

Neon Glow via Double Drawing

Flutter’s Canvas lacks a native glow effect, so the author simulates it by drawing each line twice:

Base layer: high‑opacity color, thick stroke, MaskFilter.blur for a soft halo.

Core layer: bright solid color with a thin stroke.

// 1. Draw halo
canvas.drawLine(p1, p2, Paint()
  ..color = glowColor.withAlpha(glowOpacity)
  ..strokeWidth = width * 5 * bloomWidth
  ..maskFilter = MaskFilter.blur(BlurStyle.normal, 12 * bloomWidth));

// 2. Draw bright line
canvas.drawLine(p1, p2, Paint()
  ..color = brightColor
  ..strokeWidth = width);

3D Matrix Transformation

The formation transitions from a flat 2D view to a tilted 3D perspective using Transform and Matrix4. Perspective is introduced by setting the (3, 2) entry, and rotateX tilts the plane. The matrix is also scaled slightly as the tilt progresses.

Matrix4 transformMatrix = Matrix4.identity();
transformMatrix.setEntry(3, 2, 0.002);
if (_tiltController.value > 0) {
  transformMatrix.rotateX(_tiltAnim.value);
  double scale = 1.0 - (_tiltController.value * 0.2);
  transformMatrix.scale(scale);
}

Character & Compositing

The character image is positioned at the formation’s center using Matrix4.translationValues to offset the foot to the origin. Two layers create a glowing silhouette: a blurred, color‑filtered copy for the back‑light and the original image on top.

Stack(
  children: [
    // Glow layer
    ImageFiltered(
      imageFilter: ui.ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
      child: ColorFiltered(
        colorFilter: const ColorFilter.mode(charGlowColor, BlendMode.srcIn),
        child: Image.asset(...),
      ),
    ),
    // Original layer
    Image.asset(...),
  ],
)

Result and Resources

After extensive manual tweaks and AI‑assisted iterations, the final animation approximates the desired effect, with the option for minor post‑processing. The complete source code is available at:

https://github.com/CarGuo/gsy_flutter_demo

The author concludes that AI is rapidly improving, but achieving complex logic still requires careful prompting, iterative correction, and human oversight.