Flutter Animation - That understands the component's current value and its states.

Flutter Animation - That understands the component's current value and its states.

Flutter Animation: It is an abstract class that helps to understand the components' current values and its states. we mostly used animation to create models that are required for research and study. Animation also allow us to create realistic models that helps us to show the accurate representation of a component. ‌‌

Rating System

Flutter Animation Widget:

Flutter uses an animation widget to make the component's state dynamic. We can customize the animation by using its property . Now a days animations are used to make their components more interactive.

In Flutter, we can define animation inside scaffold but before declaring animation we need to declare animation controller.

Flutter Animation Controller:

A controller for an animation. This class lets us perform tasks such as: Play an animation forward or in reverse, or stop an animation etc. Set the animation to a specific value.

By using different properties of controller we can customize the animation duration , parent and curve structure.

GetWidget Animation Widget for Flutter:

It allows to speed up overall Flutter app development by 20-30%. It has 1000+ widget component that allows you to enhance your Flutter UI design. And it will speed up in flutter development process with fully customizable features control.

Now here is i am going to talk about what is GetWidget Animation widget and how we implement this on Flutter app to build awesome Flutter Animation widget for an app.

GetWidget Animation is not static. we can customize it according to us.

Rotation GFAnimation:

Rotation GFAnimation is a Flutter Rotation Animation widget that will rotate the component. GFAnimation property type: GFAnimationType.rotateTransition , creates a rotation transition for the child of a widget. We can use the below code to create a rotation animation for a component.

import 'package:getwidget/getwidget.dart';

  AnimationController controller;
  Animation<double> animation;
  
  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 10), vsync: this);
    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
  }

GestureDetector(
  onTap: () {
    controller.repeat();
  },
  child: GFAnimation(
    turnsAnimation: animation,
    controller: controller,
    type: GFAnimationType.rotateTransition,
    alignment: Alignment.center,
    child: Image.asset(
      'assets image here',
      width: 100,
      height: 120,
    ),
  ),
),

Scaling GFAnimation:

Scaling GFAnimation apparently changes the size of a widget from smaller to bigger or vice versa. GFAnimation property type: GFAnimationType.scaleTransition , creates a scale transition for the child of widget. We can use the below code for scaling animation.

import 'package:getwidget/getwidget.dart';    

AnimationController controller;
  Animation<double> animation;
  
  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 10), vsync: this);
    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
  }

GestureDetector(
  onTap: () {
    controller.repeat();
  },
  child: GFAnimation(
    scaleAnimation: animation,
    controller: controller,
    type: GFAnimationType.scaleTransition,
    child: Image.asset(
      'assets image here',
      width: 110,
      height: 90,
    ),
  ),
),

Alignment GFAnimation:

Alignment GFAnimation align your component horizontally or else vertically. If you are giving a particular alignment then with the given duration it will align your component to the targeted alignment position. GFAnimation property type: GFAnimationType.align , creates a alignment transitions for the child of widget. We can use the below code for alignment animation.

import 'package:getwidget/getwidget.dart';    

GFAnimation(
  duration: Duration(seconds: 4),
  alignment: Alignment.bottomLeft,
  type: GFAnimationType.align,
  child: Image.asset(
    'assets image here',
    width: 130,
    height: 130,
  ),
),

Slide Transition GFAnimation:

Slide Transition GFAnimation animates the widget from one position to another relative position. GFAnimation property type: GFAnimationType.slideTransition , creates a fractional translation transitions for the child of widget. We can use the below code for slide transition animation.

import 'package:getwidget/getwidget.dart';    

 Animation<Offset> offsetAnimation;
  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 6), vsync: this);
    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
    offsetAnimation = Tween<Offset>(
      begin: Offset(-5, 0),
      end: const Offset(0, 0),
    ).animate(CurvedAnimation(
      parent: controller,
      curve: Curves.linear,
    ));
  }

Container(
  width: MediaQuery.of(context).size.width,
  child: GFAnimation(
    controller: controller,
    slidePosition: offsetAnimation,
    type: GFAnimationType.slideTransition,
    child: Image.asset(
      'assets image here',
      width: 110,
      height: 110,
    ),
  ),
),

Size GFAnimation:

Size GFAnimation animates the widget that automatically transitions its size in a given duration whenever the given child's size changes. GFAnimation property type: GFAnimationType.size , creates a widget that animates its size. We can use the below code for size animation.

import 'package:getwidget/getwidget.dart';    

bool selected = false;

AnimationController controller;
Animation<double> animation;
  
@override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 7), vsync: this);
    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
  }

GFAnimation(
  onTap: () {
    if (mounted) {
      setState(() {
        selected = !selected;
      });
    }
  },
  width: selected ? 150 : 100,
  height: selected ? 150 : 100,
  type: GFAnimationType.size,
  controller: controller,
  child: Image.asset(
    'assets image here',
     width: 90,
    height: 90,
  ),
),

Container GFAnimation:

Container GFAnimation animates the component that automatically transits its size in a given duration whenever the given child's size changes. GFAnimation property type: GFAnimationType.container , creates a widget that changes its size.. We can use the below code for container animation.

import 'package:getwidget/getwidget.dart';    

AnimationController controller;
Animation<double> animation;
double _fontSize = 40;
  
@override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 10), vsync: this);
    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
  }

GFAnimation(
  width: 80,
  changedWidth: 120,
  height: 60,
  changedHeight: 130,
  activeColor: Colors.transparent,
  color: Colors.transparent,
  fontSize: _fontSize,
  type: GFAnimationType.container,
  child: Image.asset(
    'assets image here',
     width: 90,
    height: 90,
  ),
),

How to Start:

Now here is the guide about how we should start developing GFAnimation Widget with the use of GetWidget UI Library.

Getting started will guide you how to start building a beautiful flutter application with GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^ 2.0.3

Keep playing with the pre-built UI components.

Conclusion:

Here we discuss what is Flutter Animation widgets and it's various types. We also discuss about the GFAnimation widget in our GetWidget library. And how we can use it in our Flutter app through GetWidget Animation component along with the custom properties.

FAQ's:

Q. What are the customizable properties used?

Ans. The customizable properties include the duration, reverseDuration, alignment, activeAlignment, child, curve, type, width, turnsAnimation, scaleAnimation, slidePosition, controller, onTap, changedHeight etc. of Drawer component . Hence customizable properties are full flexible. You can check out all custom properties on GetWidget Flutter Animation Widget Custom Properties.

Q. Can our slide transition will work without offsetAnimation?

Ans: No, it will not work without declaration of offsetAnimation. To make it work we have to declare the offsetAnimation inside scaffold because it holds the begin and end transition controllers which helps the components to detect the slidePosition.