#FlutterNinjas2025 Exploring Flutter Path Animations
This article summarizes the content of “Exploring Flutter Path Animations” presented at FlutterNinjas2025
In this presentation, I discussed the mechanisms of Flutter Path animations and their practical applications
Specifically, I first demonstrated how to implement the following animation in Flutter
This article covers how such animations are implemented and the subsequent Japan Symbol Quiz discussion
The slides are distributed via TestFlight, so you can download and view them as an iOS/macOS app (this app depends on SlideKit)
The source code for this slide app is available on GitHub
The Flutter Path animation implementation can also be found on GitHub
I previously presented the Swift version of this topic at try!SwiftTokyo2025
You can check that out in the following article
Flutter Path Animation Mechanisms
Let’s briefly examine how the above animation works
The process consists of the following four steps
- Prepare the Path for the Shape you want to animate
- For simple Paths, create them yourself or use AI tools
- For complex shapes, it’s recommended to create SVG files and convert them to Flutter Path objects
- Figma is commonly used for creating SVG files
- Important point: Don’t outline or close SVG paths
- Implement a Widget to display the Path
- Prepare the Flutter Path object from Step 1
- Use canvas.drawPath in CustomPainter to draw the Path
- Set the CustomPainter to a CustomPaint widget
- Display the Path partially based on progress
- Use computeMetrics to get PathMetric from Path. PathMetric provides length and segment information
- Use PathMetric’s extractPath to generate partial paths according to progress (0.0 to 1.0)
- Use addPath to combine those Paths
- Draw the paths using canvas.drawPath in CustomPainter
- Enable animation according to progress
- Prepare AnimationController and progress values
- In this implementation, I used useAnimationController from the flutter_hooks package
- Change the drawing range according to progress values (0.0 to 1.0)
- Execute the AnimationController’s forward or repeat method
- As the animation progresses, the Path is gradually drawn
Custom SVG to Flutter Path Conversion Logic
The method for converting SVG to Flutter Path is as follows:
- Use the xml package to load and parse SVG files
- Extract path elements and get the d attribute containing path data
- Use the path_drawing package to convert the d attribute to Flutter Path objects
- Since SVG files may contain multiple paths, use the addPath function to combine multiple Paths
The above implementation is described on GitHub
Basically, as long as you can prepare a Flutter Path, you can animate any shape with this mechanism
Similar mechanisms can also be implemented on other platforms, such as SwiftUI
Japan Symbol Quiz – Utilizing Flutter Path Animations
So in what situations can these Path animations be utilized?
Perhaps some features that were previously implemented using mp4 or Lottie could now be realized using only Flutter code without such resource files or libraries
Rather than focusing on such practical aspects, I thought of a slightly more entertainment-oriented application
Recently in Japan, Swift regional events called Japan-\(region).swift have been taking place
At these events, I’ve been conducting symbol quizzes using SwiftUI Path animations
This FlutterNinjas2025 presentation was a challenge to see if the same functionality implemented in SwiftUI could be similarly realized in Flutter
Comparison of SwiftUI and Flutter Animations
The left side shows SwiftUI animation, and the right side shows the Flutter animation I implemented for this presentation, both running as actual apps
You can see that almost the same movements have been reproduced
Fixed-Length Path Animation
Fixed-length path animation requires a different approach
First, calculate the total length of the path and determine which part should be displayed based on progress
Next, loop through each path segment and check if it’s within the display range
Add only the segments that are currently visible to create a smooth moving effect
Text Drawing Animation
For text animation, the process becomes more complex:
- Use the text_to_path_maker package to load single-path fonts and parse text
- Extract glyph paths for each character and measure their bounds
- Perform Y-axis inversion and baseline adjustment to transform glyph paths to pixel space
- Position glyphs horizontally considering character spacing
- Scale and center the combined path
Content Movement Animation Along Path
In addition to drawing the Path itself, you can also move content along the path
Pass the widget you want to move and use the getTangentForOffset function to get coordinates along the path
As the animation progresses, position the content at the changing coordinates
This creates smooth movement animation where any widget follows the path
You can also adjust rotation as needed and fine-tune position with offsets
While such specifications are unlikely to be required, as long as you can prepare a Path, you can move any Widget along that trajectory
Icon Movement Tab Sample
By utilizing this approach, it might be possible to implement animations like those found in some apps where icons move from the screen to bottom tabs
Summary
This time I summarized the content I discussed at FlutterNinjas2025 about Flutter Path animations
While it’s not an extremely deep technical topic, I found it to be an interesting theme with various applications, including the Japan Symbol Quiz
I think there’s still room for further development
Through this implementation, I confirmed that Path animations realized in SwiftUI can be similarly implemented in Flutter
Although it’s a simple four-step approach, I believe it has many practical applications in real apps
Detailed source code can be found on GitHub
If you’re interested, please check it out
