flutter_animations.md

Example - 1

Animated Container

import 'dart:math' show Random;

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // width of Container
  double _width = 200;
  int _digit = 0;
  // height of Container
  double _height = 200;
  // Color of Container
  Color _color = Colors.amber;
  final random = Random();

  // updating the value ---- Actually setSate use to update the value to any variable and also update inside te widget
  void _update() {
    setState(() {
      _digit = random.nextInt(99);
      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();
      _color = Color.fromRGBO(random.nextInt(300).toInt(), random.nextInt(300),
          random.nextInt(300), 1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          duration: const Duration(seconds: 2),
          color: _color,
          width: _width,
          height: _height,
          child: Center(
            child: Text(
              _digit.toString(),
              style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _update,
        child: const Icon(Icons.update),
      ),
    );
  }
}

Example - 2

Tween Animation Builder

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _value = 0.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TweenAnimationBuilder<double>(
              // tween take the starting and ending value of the movement of the object
              tween: Tween(begin: 0.0, end: _value),
              // fast or slow
              duration: const Duration(microseconds: 200),
              // builder child than will respond to the animation
              child: Center(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.black,
                ),
              ),
              builder: (context, double value, Widget? child) {
//Creates a widget that transforms its child using a translation.
// The offset argument must not be null. It specifies the translation

                return Transform.translate(
                  // offset take x-axis and y-axis
                  offset: Offset(value * 200.0 - 100.0, 0.0),
                  child: child,
                );
              }),
          // we using slider and taking the ending value of the tween and assigning it to
          //the new value basically changing the variable
          Slider.adaptive(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              }),
        ],
      ),
    );
  }
}

Example - 3

ANimation Controller

import 'dart:math';

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late final AnimationController animationController = AnimationController(
      vsync: this, duration: const Duration(milliseconds: 200));
  late final _customAnimation = Tween(begin: 0.0, end: 1.0).animate(
    CurvedAnimation(parent: animationController, curve: Curves.easeInOut),
  );
  @override
  void initState() {
    super.initState();

    animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        animationController.forward();
      }
    });
    animationController.forward();
    // animationController.repeat();
  }

  @override
  void dispose() {
    super.dispose();
    animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedBuilder(
            animation: animationController,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
            builder: (BuildContext context, Widget? child) {
              return Transform.rotate(
                angle: 0.5 * pi * animationController.value,
                child: child,
              );
            },
          ),
          RotationTransition(
            turns: animationController,
            child: Container(
              width: 50,
              height: 50,
              color: Colors.black,
            ),
          ),
          Center(
            child: ScaleTransition(
              // use _customAnimation rather than _animationController as an argument
              scale: _customAnimation,
              child: Container(width: 180, height: 180, color: Colors.purple),
            ),
          )
        ],
      ),
    );
  }
}