https://github.com/flutterfx/flutterfx_widgets

Collection of animated flutter widgets for busy flutter developers. Copy paste into your app!
https://github.com/flutterfx/flutterfx_widgets

animated-widget animation flutter ui-components ui-design

Last synced: 7 days ago
JSON representation

Collection of animated flutter widgets for busy flutter developers. Copy paste into your app!

• Host: GitHub
• URL: https://github.com/flutterfx/flutterfx_widgets
• Owner: flutterfx
• Created: 2024-10-01T18:44:08.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-10-30T03:59:35.000Z (9 days ago)
• Last Synced: 2024-10-30T06:27:08.787Z (9 days ago)
• Topics: animated-widget, animation, flutter, ui-components, ui-design
• Language: Dart
• Homepage: https://www.flutterfx.com
• Size: 45.3 MB
• Stars: 104
• Watchers: 4
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Flutterfx Widget - Animated flutter widgets

A collection of animated flutter widgets. New animated widgets will be added weekly. Targetting 50 animated widgets by the end of this year. 

Each animation is implemented as a separate widget, making it easy to understand and integrate into your own projects.

[Docs are here](https://www.flutterfx.com/docs)

  

    Preview

    Effect

    Description

  

  

    

      

    

    Folder

    

      A nice looking folder animation with a shine built using AnimationController and Transform. 

      Demonstrates the usage of Flutter's transform apis.

    

  

  

    

      

    

    Smoke

    

      Using circles with blur to make some smoke! Using Blur and Canvas.

    

  

  

    

      

    

    Bookshelf

    

      A 3d looking book shelf built using AnimatedBuilder and Transform. 

      Shows how to create more complex 3d looking animations by combining multiple transform calls.

    

  

  

    

      

    

    Circle selector

    

      A pannable, zoomable grid of interactive circles built using CustomPaint, GestureDetector, and AnimationController.

      Shows how to create a complex, animated UI component with panning, tapping, and neighbor displacement effects.

    

  

  

    

      

    

    3d Vinyl

    

      A 3D vinyl stack shuffle animation built using AnimatedBuilder and Transform. Demonstrates how to create complex 3D-looking animations by combining multiple transforms, custom curves, and z-index manipulation to simulate depth and realistic record flipping effects.

    

  

  

    

      

    

    BlurFade

    

      A smooth blur and fade animation widget built using AnimationController, CurvedAnimation, and ImageFiltered. 

      Demonstrates how to create elegant visibility transitions with combined opacity and blur effects, easily applicable to any child widget.

    

  

  

    

      

    

    Border Beam

    

      [wip]

    

  

  

    

      

    

    Meteors

    

     [wip]

    

  

    

    

      

    

    Neon Card

    

      [wip]

    

  

    

    

      

    

    Hyper text

    

     [wip]

    

  

    

    

      

    

    Typing Animation

    

      [wip]

    

  

  

  

    

      

    

    Rotating text

    

      [wip]

    

  

  

    

      

    

    Text blur animation

    

      [wip]

    

  

  

    

      

    

    Text blur floating animation

    

      [wip]

    

  

  

    

      

    

    Text chaos blur animation

    

      [wip]

    

  

  

    

      

    

    Text baloon fizzle

    

      [wip]

    

  

  

    

      

    

    Text flip animation

    

      [wip]

    

  

  

    

      

    

    An interactive globe

    

      An interactive globe made of logos.

    

  

  

    

      

    

    Celebrate Fun

    

      A fun animation on user interaction!

    

  

  

# How to Use

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

# Contributing

Found a bug? Have a suggestion? Don't just sit there, open a PR. But make sure your code works!

# License

This project is licensed under the MIT License - see the LICENSE file for details. Not that anyone cares about licenses in a demo project.

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