Animation and Motion Widgets

1. Animated Align Widget

import 'package:flutter/material.dart';

/// AnimatedAlign Example

class AnimatedAlignWidget extends StatefulWidget {

const AnimatedAlignWidget({Key? key}) : super(key: key);

@override

State<AnimatedAlignWidget> createState() =>

_AnimatedAlignWidgetState();

class _AnimatedAlignWidgetState extends

State<AnimatedAlignWidget> {

bool selected = false;

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: () {

setState(() {

selected = !selected;

});

},

child: Center(
 child: Container(

width: double.infinity,

height: 250.0,

color: Colors.blueGrey,

child: AnimatedAlign(

alignment: selected ? Alignment.topRight :

Alignment.bottomLeft,

duration: const Duration(seconds: 1),

curve: Curves.fastOutSlowIn,

child: const FlutterLogo(size: 50.0),

),

),

),

);

2. AnimatedBuilder Widget
import 'dart:math' as math;

import 'package:flutter/material.dart';

/// AnimatedBuilder Example

class AnimatedBuilderWidget extends StatefulWidget {

const AnimatedBuilderWidget({Key? key}) : super(key: key);

@override

State<AnimatedBuilderWidget> createState() =>

_AnimatedBuilderWidgetState();

class _AnimatedBuilderWidgetState extends

State<AnimatedBuilderWidget>

with TickerProviderStateMixin {

late final AnimationController _controller =

AnimationController(

duration: const Duration(seconds: 10),

vsync: this,

)..repeat();

@override

void dispose() {

_controller.dispose();

super.dispose();

@override
 Widget build(BuildContext context) {

return Center(

child: AnimatedBuilder(

animation: _controller,

child: const FlutterLogo(size: 100),

builder: (BuildContext context, Widget? child) {

return Transform.rotate(

angle: _controller.value * 2.0 * math.pi,

child: child,

);

},

),

);

3. AnimatedContainer Widget
import 'package:flutter/material.dart';

/// AnimatedContainer Example

class AnimatedContainerWidget extends StatefulWidget {

const AnimatedContainerWidget({Key? key}) : super(key: key);

@override

State<AnimatedContainerWidget> createState() =>

_AnimatedContainerWidgetState();

class _AnimatedContainerWidgetState extends

State<AnimatedContainerWidget> {

bool selected = false;

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: () {

setState(() {

selected = !selected;

});

},

child: Center(

child: AnimatedContainer(

width: selected ? 200.0 : 100.0,

height: selected ? 100.0 : 200.0,

color: selected ? Colors.blueGrey : Colors.white,

 alignment: selected ? Alignment.center :
AlignmentDirectional.topCenter,

duration: const Duration(seconds: 2),

curve: Curves.fastOutSlowIn,

child: const FlutterLogo(size: 75),

),

),

);

4. AnimatedCrossFade
import 'package:flutter/material.dart';

/// AnimatedCrossFade Example

class AnimatedCrossFadeWidget extends StatefulWidget {

const AnimatedCrossFadeWidget({Key? key}) : super(key: key);

@override

State<AnimatedCrossFadeWidget> createState() =>

_AnimatedCrossFadeWidgetState();

}
class _AnimatedCrossFadeWidgetState extends
State<AnimatedCrossFadeWidget> {

bool showFirst = true;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text('AnimatedCrossFade

Example')),

body: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

AnimatedCrossFade(

firstChild: Image.asset(

'assets/icon/blue.jpg',

width: double.infinity,

),

secondChild: Image.asset(

'assets/icon/ocean.jpg',

width: double.infinity,

),

crossFadeState: showFirst

? CrossFadeState.showFirst
 : CrossFadeState.showSecond,

duration: const Duration(seconds: 1),

),

const SizedBox(height: 20),

TextButton(

onPressed: () {

setState(() {

showFirst = !showFirst;

});

},

child: const Text('Toggle Image'),

),

],

),

);

5. AnimatedDefaultTextStyle Widget
import 'package:flutter/material.dart';

/// AnimatedDefaultTextStyle Example

class AnimatedDefaultTextStyleWidget extends StatefulWidget {

 const AnimatedDefaultTextStyleWidget({Key? key}) : super(key:
key);

@override

State<AnimatedDefaultTextStyleWidget> createState() =>

_AnimatedDefaultTextStyleWidgetState();

class _AnimatedDefaultTextStyleWidgetState

extends State<AnimatedDefaultTextStyleWidget> {

bool _first = true;

double _fontSize = 60;

Color _color = Colors.blue;

@override

Widget build(BuildContext context) {

return Column(

mainAxisSize: MainAxisSize.min,

children: <Widget>[

SizedBox(

height: 120,

child: AnimatedDefaultTextStyle(
 duration: const Duration(milliseconds: 300),

style: TextStyle(

fontSize: _fontSize,

color: _color,

fontWeight: FontWeight.bold,

),

child: const Text('Flutter'),

),

),

TextButton(

onPressed: () {

setState(() {

_fontSize = _first ? 90 : 60;

_color = _first ? Colors.red : Colors.blue;

_first = !_first;

});

},

child: const Text('Switch'),

),

],

);

}
 6. Animated List
import 'package:flutter/material.dart';

Widget myWidget(BuildContext context) {

return MediaQuery.removePadding(

context: context,

removeTop: true,

removeBottom: true,

child: AnimatedList(

initialItemCount: 50,

itemBuilder: (BuildContext context, int index,

Animation<double> animation) {

return Card(

color: Colors.amber,

child: Center(child: Text('$index')),

);

},

),

);

7. AnimatedListState Widget
Key Points to Remember

 GlobalKey<AnimatedListState>: Controls the list.

 insertItem(index): Adds an item with animation.

 removeItem(index, builder): Removes an item with animation.

 SizeTransition: Used here for a simple entry/exit effect.

import 'package:flutter/material.dart';

class SimpleAnimatedListExample extends StatefulWidget {

@override

_SimpleAnimatedListExampleState createState() =>

_SimpleAnimatedListExampleState();

class _SimpleAnimatedListExampleState extends

State<SimpleAnimatedListExample> {

final GlobalKey<AnimatedListState> _listKey =

GlobalKey<AnimatedListState>();

final List<int> _items = [0, 1, 2]; // Initial list

void _addItem() {

int newItem = _items.isNotEmpty ? _items.last + 1 : 0; // New

item
 _items.add(newItem); // Add item to the list

_listKey.currentState!.insertItem(_items.length - 1); //
Animate insertion

void _removeItem() {

if (_items.isEmpty) return; // Do nothing if the list is

empty

int removedItem = _items.removeLast(); // Remove the last

item

_listKey.currentState!.removeItem(

_items.length, // Index of the removed item

(context, animation) => _buildItem(removedItem, animation),

// Animate removal

);

Widget _buildItem(int item, Animation<double> animation) {

return SizeTransition(

sizeFactor: animation, // Animation effect for size change

child: ListTile(

title: Text('Item $item'),

tileColor: Colors.amber,

),

);
}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Simple AnimatedList')),

body: Column(

children: [

Row(

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: [

ElevatedButton(

onPressed: _addItem,

child: Text('Add Item'),

),

ElevatedButton(

onPressed: _removeItem,

child: Text('Remove Item'),

),

],

),
 Expanded(

child: AnimatedList(

key: _listKey, // Associate the list with its state

initialItemCount: _items.length,

itemBuilder: (context, index, animation) =>

_buildItem(_items[index], animation),

),

),

],

),

);

8. AnimatedModelBarrier Widget
import 'package:flutter/material.dart';

class AnimatedModalBarrierWidget extends StatefulWidget {

const AnimatedModalBarrierWidget({Key? key}) : super(key: key);

@override
 State<AnimatedModalBarrierWidget> createState() =>
_AnimatedModalBarrierWidgetState();

class _AnimatedModalBarrierWidgetState extends

State<AnimatedModalBarrierWidget>

with SingleTickerProviderStateMixin {

late AnimationController _animationController;

late Animation<Color?> _colorAnimation;

bool isPressed = false;

@override

void initState() {

super.initState();

// Define a color tween animation

final ColorTween _colorTween = ColorTween(

begin: Colors.orangeAccent.withOpacity(0.5),

end: Colors.blueGrey.withOpacity(0.5),

);

// Initialize the AnimationController

_animationController = AnimationController(
 vsync: this,

duration: const Duration(seconds: 3),

);

// Connect the ColorTween to the AnimationController

_colorAnimation = _colorTween.animate(_animationController);

@override

void dispose() {

_animationController.dispose();

super.dispose();

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text('AnimatedModalBarrier

Example')),

body: Stack(

children: [

Center(
 child: ElevatedButton(

onPressed: () {

setState(() {

isPressed = !isPressed;

if (isPressed) {

_animationController.forward();

} else {

_animationController.reverse();

});

},

child: Text(isPressed ? 'Hide Barrier' : 'Show

Barrier'),

),

),

if (isPressed)

AnimatedModalBarrier(

color: _colorAnimation,

dismissible: true,

),

],

),
 );

9. AnimatedOpacity Widget
import 'package:flutter/material.dart';

class LogoFade extends StatefulWidget {

const LogoFade({super.key});

@override

State<LogoFade> createState() => _LogoFadeState();

class _LogoFadeState extends State<LogoFade> {

double opacityLevel = 1.0;

void _changeOpacity() {

setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);

@override
 Widget build(BuildContext context) {

return Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

AnimatedOpacity(

opacity: opacityLevel,

duration: const Duration(seconds: 3),

child: const FlutterLogo(size: 100),

),

const SizedBox(height: 20),

ElevatedButton(

onPressed: _changeOpacity,

child: const Text('Fade Logo'),

),

],

);

10. AnimatedPhysicalModel Widget

import 'package:flutter/material.dart';
class AnimatedPhysicalModelWidget extends StatefulWidget {

const AnimatedPhysicalModelWidget({Key? key}) : super(key:

key);

@override

State<AnimatedPhysicalModelWidget> createState() =>

_AnimatedPhysicalModelWidgetState();

class _AnimatedPhysicalModelWidgetState

extends State<AnimatedPhysicalModelWidget> {

bool _isFlat = true;

bool _animateColor = true;

@override

Widget build(BuildContext context) {

return Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: <Widget>[
 AnimatedPhysicalModel(

duration: const Duration(milliseconds: 500),

curve: Curves.fastOutSlowIn,

elevation: _isFlat ? 0 : 6.0, // Animate elevation

borderRadius: _isFlat

? BorderRadius.circular(0) // Flat state

: BorderRadius.circular(20), // Rounded state

shape: BoxShape.rectangle, // Shape is not animated

shadowColor: Colors.black,

animateColor: _animateColor, // Animate color

conditionally

color: _isFlat ? Colors.white : Colors.blueGrey, //

Animated color

child: const SizedBox(

height: 120.0,

width: 120.0,

child: Icon(Icons.android_outlined),

),

),

const SizedBox(height: 20),

ElevatedButton(

onPressed: () {

setState(() {
 _isFlat = !_isFlat; // Toggle flat/elevated state

});

},

child: const Text('Toggle State'),

),

const SizedBox(height: 20),

ElevatedButton(

onPressed: () {

setState(() {

_animateColor = !_animateColor; // Toggle

animateColor

});

},

child: Text(_animateColor ? 'Disable Color Animation'

: 'Enable Color Animation'),

),

],

),

);

11. AnimatedPositioned Widget

class _AnimatedPositionedExampleState

extends State<AnimatedPositionedExample> {

bool selected = false;

@override

Widget build(BuildContext context) {

return SizedBox(

width: 200,

height: 350,

child: Stack(

children: <Widget>[

AnimatedPositioned(

width: selected ? 200.0 : 50.0,

height: selected ? 50.0 : 200.0,

top: selected ? 50.0 : 150.0,

duration: widget.duration,

curve: widget.curve,

child: GestureDetector(

onTap: () {

setState(() {

selected = !selected;
 });

},

child: const ColoredBox(

color: Colors.blue,

child: Center(

child: Text(

'Tap me',

style: TextStyle(color: Colors.white),

),

),

),

),

),

],

),

);

12. AnimatedSize Widget

class _AnimatedSizeExampleState extends

State<AnimatedSizeExample>{
 double _size = 300;

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: () {

setState(() {

_size = _size == 300 ? 100 : 300;

});

},

child: Container(

color: Colors.white,

child: AnimatedSize(

curve: Curves.easeIn,

duration: const Duration(seconds: 1),

child: FlutterLogo(size: _size),

),

),

);

}
13. AnimatedWidget Widget
class AnimatedWidgetExampleApp extends StatelessWidget {

const AnimatedWidgetExampleApp({super.key});

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: AnimatedWidgetExample(),

);

class SpinningContainer extends AnimatedWidget {

const SpinningContainer({

super.key,

required AnimationController controller,

}) : super(listenable: controller);

Animation<double> get _progress => listenable as

Animation<double>;

@override
 Widget build(BuildContext context) {

return Transform.rotate(

angle: _progress.value * 2.0 * math.pi, // Rotates between

0 and 2π (360 degrees)

child: Container(

width: 200.0,

height: 200.0,

color: Colors.green,

),

);

class AnimatedWidgetExample extends StatefulWidget {

const AnimatedWidgetExample({super.key});

@override

State<AnimatedWidgetExample> createState() =>

_AnimatedWidgetExampleState();

class _AnimatedWidgetExampleState extends

State<AnimatedWidgetExample>

with TickerProviderStateMixin {
 late final AnimationController _controller =
AnimationController(

duration: const Duration(seconds: 10), // Full rotation in 10

seconds

vsync: this,

)..repeat(); // Repeats the animation indefinitely

@override

void dispose() {

_controller.dispose(); // Dispose the controller to free

resources

super.dispose();

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text('AnimatedWidget

Example')),

body: Center(

child: SpinningContainer(controller: _controller), //

Pass controller to SpinningContainer

),

);

14. ImplicitlyAnimated Widget

Examples: AnimatedContainer, AnimatedAlign, and AnimatedOpacity
15. DecoratedBoxTransition Widget
class DecoratedBoxTransitionExampleApp extends StatelessWidget {

const DecoratedBoxTransitionExampleApp({super.key});

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: DecoratedBoxTransitionExample(),

);

class DecoratedBoxTransitionExample extends StatefulWidget {

const DecoratedBoxTransitionExample({super.key});

@override

State<DecoratedBoxTransitionExample> createState() =>

_DecoratedBoxTransitionExampleState();

}
class _DecoratedBoxTransitionExampleState

extends State<DecoratedBoxTransitionExample> with

TickerProviderStateMixin {

final DecorationTween decorationTween = DecorationTween(

begin: BoxDecoration(

color: const Color(0xFFFFFFFF),

border: Border.all(style: BorderStyle.none),

borderRadius: BorderRadius.circular(60.0), // Rounded

corners

boxShadow: const <BoxShadow>[

BoxShadow(

color: Color(0x66666666), // Light shadow

blurRadius: 10.0,

spreadRadius: 3.0,

offset: Offset(0, 6.0), // Shadow offset

),

],

),

end: BoxDecoration(

color: const Color(0xFFFFFFFF), // No shadow, sharp corners

border: Border.all(style: BorderStyle.none),

borderRadius: BorderRadius.zero,
 ),

);

late final AnimationController _controller =

AnimationController(

vsync: this,

duration: const Duration(seconds: 3), // Animation duration

)..repeat(reverse: true); // Reverses animation continuously

@override

void dispose() {

_controller.dispose(); // Dispose controller to free

resources

super.dispose();

@override

Widget build(BuildContext context) {

return ColoredBox(

color: Colors.white,

child: Center(

child: DecoratedBoxTransition(

decoration: decorationTween.animate(_controller), //
Animated decoration
 child: Container(

width: 200, // Fixed child width

height: 200, // Fixed child height

padding: const EdgeInsets.all(10),

child: const FlutterLogo(),

),

),

),

);

16. Hero Widget

import 'package:flutter/material.dart';

class Widget116 extends StatelessWidget {

const Widget116({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return ListTile(
 trailing: const Hero(

tag: 'tag-1',

child: Icon(Icons.person),

),

onTap: () => Navigator.of(context).push(

MaterialPageRoute(

builder: (context) => const SecondPage(),

),

),

title: const Text('Click on me'),

);

class SecondPage extends StatelessWidget {

const SecondPage({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(
 title: const Text('Second Page'),

),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: const <Widget>[

Hero(

tag: 'tag-1',

child: Container(

color: Colors.orangeAccent,

height: 100,

width: 100,

),

),

],

),

),

);