Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Packages

Create Beautiful Effect with Simple Animation Package

July 6, 2020
in Flutter Packages, Flutter Widgets
7 min read
flutter simple animations

Looking for a way to create beautiful Flutter animation with ease? Here’s a Flutter package that would give you beautiful effects in Flutter, and would surely add more life to your application.

RELATED FLUTTER RESOURCES

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

A Beautiful Bottom navigation bar with bubble click effect in Flutter

A Verification Code Input Widget to get Value in Flutter.

Simple Animations is a powerful framework to create beautiful custom animations in no time.

ADVERTISEMENT
  • 💪 fully tested
  • 📝 well documented
  • 💼 enterprise-ready

🌞 Highlights 

  • Easily create custom animations in stateless widgets
  • Animate multiple properties at once
  • Create staggered animations within seconds
  • Simplified working with AnimationController instances
  • Designed with type-safety in mind

⛏️ Getting started 

Add the dependency simple_animations: ^2.X.X (find recent version) to your project and start using it:

import 'package:simple_animations/simple_animations.dart';

🛈 If are upgrading from version 1.x.x read the migration guide.

🍱 Modules 

Simple Animations constists of multiple modules that are provided by this Flutter package. You can also use them separately.

Overview 

ModuleDescription
🚀 Stateless AnimationWidgets for super simple creating custom animations.
🎭 MultiTweenAnimate multiple properties at once or create staggered animations.
🎥 AnicotoSetup managed AnimationControllers instantly.

Click on a module name to read it’s documentation and to see examples.


🛈 Note: These examples uses supercharged for syntactic sugar.


🚀 Stateless Animation 

Stateless Animation provides your app with a powerful set of Flutter widgets that hide the most complex part of creating animations.

Example: Square with a animated, fading background color.

PlayAnimation<Color>( // <-- specify type of animated variable
  tween: Colors.red.tweenTo(Colors.blue), // <-- define tween of colors
  builder: (context, child, value) { // <-- builder function
    return Container(
        color: value, // <-- use animated value
        width: 100, 
        height: 100
    );
});

Read more about it or watch examples.


🎭 MultiTween 

MultiTween gives is mighty tool thats enables you to tween multiple properties in a single Animatable or designing staggered animations.

Example: Custom tween with multiple properties.

enum AniProps { width, height, color } // <-- define properties

class MyWidget extends StatelessWidget {

  final _tween = MultiTween<AniProps>() // <-- design tween
    ..add(AniProps.width, 0.0.tweenTo(400.0), 1000.milliseconds)
    ..add(AniProps.width, 400.0.tweenTo(300.0), 1000.milliseconds)
    ..add(AniProps.height, 500.0.tweenTo(200.0), 2000.milliseconds)
    ..add(AniProps.color, Colors.red.tweenTo(Colors.blue), 2.seconds);

  @override
  Widget build(BuildContext context) {
    return ... // <-- use tween
  }
}

Read more about it or watch examples.


🎥 Anicoto 

Anicoto fully manages your AnimationController instances and handles initialization, configuration and disposing. No more boilerplate code.

Example: Animated stateful widget with full-fledged AnimationController instance.

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {  // <-- add AnimationMixin to state class

  Animation<double> size; // <-- declare animation variable

  @override
  void initState() {
    size = 0.0.tweenTo(200.0).animatedBy(controller); // <-- connect tween and controller and apply to animation variable
    controller.play(); // <-- start the animation playback
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.value, // <-- use animation variable's value here 
      height: size.value, // <-- use animation variable's value here
      color: Colors.red
    );
  }
}

Read more about it or watch examples.

📈 Improve 

Simple Animations will improve in future updates. Help me by reporting bugs, submit new ideas for features, or anything else that you want to share.

  • Just write an issue on GitHub. ✏️
  • And don’t forget to hit the like button for this package ✌️

Some Examples You’d Love to see;

TypeWriter 

Example animates width of the box, text length and cursor.

flutter simple animation 1

View code

Checkbox 

Example of an animated custom checkbox.

flutter simple animation 2

View code

Waves 

Example of sine waves in front of an animated background gradient.

flutter simple animation 3

View code

Widgets fade-in 

Example of delayed fade-in of widgets.

flutter simple animation 4

View code

Bubbles 

Example of a bubble particle system.

flutter simple animation 5

View code

Bar charts 

Example of animated bar charts.

flutter simple animation 6

View code

Particle explosion 

Example of a particle explosion upon user interaction.

flutter simple animation 7

View code

Loading animation 

Example of a custom loading animation that waits for a http request.

flutter simple animation 8

View code

  • Customizable App Introduction Slider for Flutter (OnBoarding)

RelatedFlutter Resource

Navigation

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

September 15, 2020
A Beautiful Bottom navigation bar with bubble click effect in Flutter
Navigation

A Beautiful Bottom navigation bar with bubble click effect in Flutter

September 15, 2020
A Verification Code Input Widget to get Value in Flutter.
Flutter Packages

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020
How to select & Pick a Countries from a List in Flutter
Flutter Packages

How to select & Pick a Countries from a List in Flutter

September 2, 2020
How To Record Audio Mp3 using Native API in Flutter
Flutter Packages

How To Record Audio Mp3 using Native API in Flutter

September 2, 2020
How To Display Flag on Your Flutter App Using the Flag Package
Flutter Packages

How To Display Flag on Your Flutter App Using the Flag Package

August 19, 2020
Next Post
FLUTTER-FUTUER-APP-DEVELOPMENT

Why Google Flutter Is the Future of Mobile App Development

flutter alert dialog showDialog

How to Show Dialog + Alert Dialog in Flutter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

flutter social share

Flutter Package to Share on Social Media

June 27, 2020
Understanding the Flutter COntainer

Container Widget & Box Model in Flutter – All You Need To Know

July 22, 2020
A Verification Code Input Widget to get Value in Flutter.

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In