Animations in Flutter


Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience.

Most of the inbuild animation build on “Animation<T> class”

Some of the Implementation are: –

  • AlwaysStoppedAnimation
  • AnimationController
  • CompoundAnimation
  • CurvedAnimation
  • ProxyAnimation
  • ReverseAnimation
  • TrainHoppingAnimation
import 'package:flutter/material.dart';

class AnimatedLogo extends StatefulWidget {
  const AnimatedLogo({super.key});

  @override
  State<AnimatedLogo> createState() => _AnimatedLogoState();
}

class _AnimatedLogoState extends State<AnimatedLogo> {
  bool _bigger = true;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(100),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          /*Container(
            width: _bigger ? 10 : 200,
            child: Image.asset('assets/logo.PNG'),
          ),*/
          AnimatedContainer(
            width: _bigger ? 10 : 100,
            duration: const Duration(seconds: 1),
            child: Image.asset('assets/logo.PNG'),
          ),
          OutlinedButton(
            onPressed: () => setState(() {
              _bigger = !_bigger;
            }),
            child: const Icon(Icons.play_arrow),
          ),
        ],
      ),
    );
  }
}
https://dasschicksal.com/flutter-multi-threading/