# FlutterFX: A collection of animated effects build with Flutter

Multiple Flutter aniamted effects examples with Flutter.

Each one a building block.

Feel free to use them for your next project.

Star the repo if you find any effect usefull.

[📚 View the documentation](https://www.flutterfx.com/docs)



# Preview

<table>
<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_white_bg.gif" alt="Folder" width="200">
<br/>
<strong>Folder</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_smoke.gif" alt="Smoke" width="200">
<br/>
<strong>Smoke</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/gif_short.gif" alt="Bookshelf" width="200">
<br/>
<strong>Bookshelf</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_circle_selector.gif" alt="Circle Selector" width="200">
<br/>
<strong>Circle Selector</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_3d_vinyl.gif" alt="3D Vinyl" width="200">
<br/>
<strong>3D Vinyl</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_blurfade.gif" alt="BlurFade" width="200">
<br/>
<strong>BlurFade</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_7.gif" alt="Border Beam" width="200">
<br/>
<strong>Border Beam</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_8.gif" alt="Meteors" width="200">
<br/>
<strong>Meteors</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_9.gif" alt="Neon Card" width="200">
<br/>
<strong>Neon Card</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_10.gif" alt="Hyper Text" width="200">
<br/>
<strong>Hyper Text</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_11.gif" alt="Typing Animation" width="200">
<br/>
<strong>Typing Animation</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_rotating_text.gif" alt="Rotating Text" width="200">
<br/>
<strong>Rotating Text</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_blur.gif" alt="Text Blur" width="200">
<br/>
<strong>Text Blur</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_float_blur.gif" alt="Text Float Blur" width="200">
<br/>
<strong>Text Float Blur</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_chaos_blur.gif" alt="Text Chaos Blur" width="200">
<br/>
<strong>Text Chaos Blur</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_baloon_blur.gif" alt="Text Balloon Fizzle" width="200">
<br/>
<strong>Text Balloon Fizzle</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_flip_up.gif" alt="Text Flip" width="200">
<br/>
<strong>Text Flip</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_logo_globe.gif" alt="Interactive Globe" width="200">
<br/>
<strong>Interactive Globe</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_celebrate.gif" alt="Celebrate" width="200">
<br/>
<strong>Celebrate</strong>
</td>

  <td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_tubelight_effect_with_glow.gif" alt="Tube Light" width="200">
<br/>
<strong>Tube Light</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_work_life_slider.gif" alt="Life Balance" width="200">
<br/>
<strong>Life Balance</strong>
</td>
</tr>



<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_avatar_loader.gif" alt="Avatar Loader" width="200">
<br/>
<strong>Avatar Loader</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_avatar_loader_2.gif" alt="Profile Loader" width="200">
<br/>
<strong>Profile Loader</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_background_animated_grid.gif" alt="Animated Grid" width="200">
<br/>
<strong>Animated Grid</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_background_beams.gif" alt="Beam Pattern" width="200">
<br/>
<strong>Beam Pattern</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_background_ripples.gif" alt="Ripple Effect" width="200">
<br/>
<strong>Ripple Effect</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_bg_dot_pattern.gif" alt="Dot Matrix" width="200">
<br/>
<strong>Dot Matrix</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_bottom_sheet.gif" alt="Bottom Sheet" width="200">
<br/>
<strong>Bottom Sheet</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_butterfly_normal_fly.gif" alt="Butterfly Flight" width="200">
<br/>
<strong>Butterfly Flight</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_circular_reveal.gif" alt="Circular Reveal" width="200">
<br/>
<strong>Circular Reveal</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_debug_overlay_for_transform.gif" alt="Transform Guide" width="200">
<br/>
<strong>Transform Guide</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_decoration_bulb_demo.gif" alt="Glowing Bulb" width="200">
<br/>
<strong>Glowing Bulb</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_decoration_thread_demo.gif" alt="Thread Design" width="200">
<br/>
<strong>Thread Design</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_expand_collapse.gif" alt="Expand Collapse" width="200">
<br/>
<strong>Expand Collapse</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_exploding_beams.gif" alt="Beam Burst" width="200">
<br/>
<strong>Beam Burst</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_flickering_cards_demo.gif" alt="Flickering Cards" width="200">
<br/>
<strong>Flickering Cards</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_flickering_grid_demo.gif" alt="Dynamic Grid" width="200">
<br/>
<strong>Dynamic Grid</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_gemini_splash.gif" alt="Gemini Splash" width="200">
<br/>
<strong>Gemini Splash</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_github_spark_loader.gif" alt="Spark Loader" width="200">
<br/>
<strong>Spark Loader</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_grid_enter_animation_with_blur.gif" alt="Blur Grid" width="200">
<br/>
<strong>Blur Grid</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_grid_in_motion.gif" alt="Grid Motion" width="200">
<br/>
<strong>Grid Motion</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_infinite_scrolling.gif" alt="Infinite Scroll" width="200">
<br/>
<strong>Infinite Scroll</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_infinite_scrolling_3d.gif" alt="3D Scroll" width="200">
<br/>
<strong>3D Scroll</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_interactive_butterfly.gif" alt="Interactive Butterfly" width="200">
<br/>
<strong>Interactive Butterfly</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_moving_ticker_effect.gif" alt="Ticker Effect" width="200">
<br/>
<strong>Ticker Effect</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_nightmode_toggle.gif" alt="Night Toggle" width="200">
<br/>
<strong>Night Toggle</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_notification_toast.gif" alt="Toast Alert" width="200">
<br/>
<strong>Toast Alert</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_orbit.gif" alt="Orbit Motion" width="200">
<br/>
<strong>Orbit Motion</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_orbit_with_blur.gif" alt="Blur Orbit" width="200">
<br/>
<strong>Blur Orbit</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_orbital_star.gif" alt="Star Orbit" width="200">
<br/>
<strong>Star Orbit</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_page_flip.gif" alt="Page Flip" width="200">
<br/>
<strong>Page Flip</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_particles.gif" alt="Particle Effect" width="200">
<br/>
<strong>Particle Effect</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_particles_like_github_spark.gif" alt="GitHub Spark" width="200">
<br/>
<strong>GitHub Spark</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_progressbar_set_1.gif" alt="Progress Set 1" width="200">
<br/>
<strong>Progress Set 1</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_progressbar_set_2.gif" alt="Progress Set 2" width="200">
<br/>
<strong>Progress Set 2</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_rotating_tree.gif" alt="Tree Rotation" width="200">
<br/>
<strong>Tree Rotation</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_scratch_to_reveal.gif" alt="Reveal Effect" width="200">
<br/>
<strong>Reveal Effect</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_scroll_progress.gif" alt="Scroll Progress" width="200">
<br/>
<strong>Scroll Progress</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_shimmer_button.gif" alt="Shimmer Button" width="200">
<br/>
<strong>Shimmer Button</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_shining_card.gif" alt="Shining Card" width="200">
<br/>
<strong>Shining Card</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_simple_shader.gif" alt="Shader Demo" width="200">
<br/>
<strong>Shader Demo</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_sphere_loader.gif" alt="Sphere Loader" width="200">
<br/>
<strong>Sphere Loader</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_splash_door_reveal.gif" alt="Door Reveal" width="200">
<br/>
<strong>Door Reveal</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_square_loader.gif" alt="Square Loader" width="200">
<br/>
<strong>Square Loader</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_stacked_card.gif" alt="Stacked Cards" width="200">
<br/>
<strong>Stacked Cards</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_stacked_card_with_expand_functionality.gif" alt="Expandable Stack" width="200">
<br/>
<strong>Expandable Stack</strong>
</td>
</tr>

<tr>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_text_morph.gif" alt="Text Morph" width="200">
<br/>
<strong>Text Morph</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_text_on_path.gif" alt="Path Text" width="200">
<br/>
<strong>Path Text</strong>
</td>
<td align="center">
<img src="https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/_showcase_text_spring_chaos.gif" alt="Text Spring" width="200">
<br/>
<strong>Text Spring</strong>
</td>
</tr>

</table>

## Quick Start

1. Clone this repository
2. Run `flutter pub get`
3. Open the project in your preferred IDE
4. Run the app on your device or simulator

## Documentation

For detailed implementation guides and API references, visit [flutterfx.com/docs](https://www.flutterfx.com/docs)

## Contributing

Found a bug? Have a suggestion? Feel free to open a PR with your improvements!

## License

This project is licensed under the MIT License. See the LICENSE file for details.

[flutterfx.com](https://flutterfx.com/)