Flutter Widget Generator
Generate a ready-to-paste Flutter widget for your Lottie animation using the lottie package
1. Upload your Lottie file
Drag & drop your file here or click to browse
Supports .json and .lottie files (max. 10MB)
Preview
Upload a Lottie file to see the preview
The Free Flutter Widget Generator for Lottie
Building a Flutter app and need a Lottie animation on screen? Our free Flutter widget generator turns any Lottie into a ready-to-paste Dart widget that uses the popular lottie package.
Pick an asset or network source, set the widget name, size and looping, then copy the code or download the .dart file. No design tooling, no boilerplate to remember — the code is generated locally in your browser.
How to Generate a Flutter Lottie Widget
Wiring Lottie into Flutter means remembering the package API and pubspec setup. This tool writes the widget for you:
Upload your Lottie file
Drag and drop or browse for a .json or .lottie file. The size is read from the animation.
Configure the widget
Set the widget name, choose asset or network source, the path/URL, size and whether it loops.
Generate the code
Click Generate to produce a complete Dart StatelessWidget, shown in the Code tab.
Copy or download
Copy the code or download a snake_case .dart file, then drop it into your Flutter project.
No account, no server uploads — get a working widget in under a minute.
Key Features
Idiomatic Flutter Widget
Generates a clean StatelessWidget using Lottie.asset or Lottie.network — modern, readable Dart.
Asset or Network
Bundle the animation as an asset or load it from a URL — pick the source that fits your app.
Sizing & Loop
Set the widget’s width and height (defaults to your animation) and toggle looping on or off.
Copy-Paste Ready
Copy the code straight in or download a correctly named .dart file to start from.
Popular Use Cases
Drop an Animation Into a Flutter App
Skip the boilerplate and get a working animated widget you can import immediately.
Hand Off to Flutter Devs
Give engineers dev-ready Dart so animations integrate faster.
Splash & Onboarding
Generate widgets for splash screens and onboarding steps in a mobile app.
Design-System Components
Wrap animated icons as reusable widgets for your Flutter component library.
Documentation Examples
Embed Lottie widgets in docs and sample apps with a copy-paste block.
Quick Prototype
Generate and paste to test an animation in a Flutter prototype without writing wiring code.
Pro Tips
Add the lottie package
Run flutter pub add lottie so the import resolves, then paste the generated widget.
Declare your asset
For asset source, add the assets folder under flutter: in pubspec.yaml so Flutter bundles the JSON.
Match the size to your layout
Width and height default to the animation’s dimensions — adjust to fit your screen without distortion.
Turn off loop for one-shots
Uncheck Loop for success ticks or transitions that should play once and stop.
Privacy and Security
We take your privacy seriously. Unlike most online converters that upload your files to remote servers, our tool processes everything locally.
No uploads – Your files are processed entirely in your browser. They never touch our servers.
No tracking – We don't log which files you convert or what settings you use.
No accounts – Use the tool immediately. No registration, no personal data required.
Inspect it yourself – Open DevTools and watch the network tab. You'll see zero file uploads.
Frequently Asked Questions
Everything you need to know about Lottie animations and our tools.
Which package does the code use?
The generated widget uses the popular lottie package (Lottie.asset / Lottie.network). Add it to your pubspec.yaml with: flutter pub add lottie.
Asset or network source — which do I pick?
Choose Asset if you bundle the animation JSON in your app (declare it under assets in pubspec.yaml). Choose Network if you load it from a URL at runtime.
Where do I put the animation file?
For an asset, place the .json under your assets folder and reference it (e.g. assets/animation.json), then declare the folder in pubspec.yaml. For network, point the path at the URL.
How do I set the size?
The width and height fields set the widget’s pixel size; they default to your animation’s dimensions. Fit is set to BoxFit.contain so it scales without distortion.
Does it loop?
By default the widget repeats. Turn off the Loop option to play once.
Is the code production-ready?
It is a clean StatelessWidget you can drop straight in. Extend it with controllers or props as your app needs.