This tutorial demonstrates how to use various Animation and Motion Widgets in Flutter to create visually engaging UI transitions and animations.
AnimatedContainer.dart
import 'package:flutter/material.dart';
class AnimatedContainerExample extends StatefulWidget {
@override
_AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}
class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
double _width = 100;
double _height = 100;
Color _color = Colors.blue;
void _changeProperties() {
setState(() {
_width = _width == 100 ? 200 : 100;
_height = _height == 100 ? 200 : 100;
_color = _color == Colors.blue ? Colors.red : Colors.blue;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("AnimatedContainer Example")),
body: Center(
child: GestureDetector(
onTap: _changeProperties,
child: AnimatedContainer(
duration: Duration(seconds: 1),
width: _width,
height: _height,
color: _color,
),
),
),
);
}
}
main.dart
import 'package:basic_widgets/AnimatedContainerExample.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child:AnimatedContainerExample()//add code here
)
),
);
}
}AnimatedOpacity Widget
AnimatedOpacity animates the visibility of a widget by gradually changing its opacity.
AnimatedOpacityExample.dart
import 'package:flutter/material.dart';
class AnimatedOpacityExample extends StatefulWidget {
@override
_AnimatedOpacityExampleState createState() => _AnimatedOpacityExampleState();
}
class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
double _opacity = 1.0;
void _toggleOpacity() {
setState(() {
_opacity = _opacity == 1.0 ? 0.0 : 1.0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("AnimatedOpacity Example")),
body: Center(
child: GestureDetector(
onTap: _toggleOpacity,
child: AnimatedOpacity(
opacity: _opacity,
duration: Duration(seconds: 1),
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}main.dart
import 'package:basic_widgets/AnimatedOpacityExample.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child:AnimatedOpacityExample()//add code here
)
),
);
}
}Hero Widget
Hero creates a shared element transition between two screens.
HeroFirstScreen.dart
import 'package:flutter/material.dart';
import 'package:basic_widgets/HeroSecondScreen.dart';
class HeroFirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Hero First Screen")),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HeroSecondScreen()),
);
},
child: Hero(
tag: "hero-example",
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}HeroSecondScreen.dart
import 'package:flutter/material.dart';
class HeroSecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Hero Second Screen")),
body: Center(
child: Hero(
tag: "hero-example",
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
),
),
);
}
}
main.dart
import 'package:basic_widgets/HeroFirstScreen.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child:HeroFirstScreen()//add code here
)
),
);
}
}FadeTransition Widget
FadeTransition animates the opacity of its child widget.
FadeTransitionExample.dart
class FadeTransitionExample extends StatefulWidget {
@override
_FadeTransitionExampleState createState() => _FadeTransitionExampleState();
}
class _FadeTransitionExampleState extends State<FadeTransitionExample>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("FadeTransition Example")),
body: Center(
child: FadeTransition(
opacity: _animation,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
main.dart
import 'package:basic_widgets/FadeTransitionExample.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child:FadeTransitionExample()//add code here
)
),
);
}
}ScaleTransition
ScaleTransition animates the scaling of its child widget.
ScaleTransitionExample.dart
import 'package:flutter/material.dart';
class ScaleTransitionExample extends StatefulWidget {
@override
_ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
}
class _ScaleTransitionExampleState extends State<ScaleTransitionExample>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = Tween<double>(begin: 0.5, end: 1.5).animate(_controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("ScaleTransition Example")),
body: Center(
child: ScaleTransition(
scale: _animation,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
main.dart
import 'package:basic_widgets/ScaleTransitionExample.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child:ScaleTransitionExample()//add code here
)
),
);
}
}RotationTransition
RotationTransition animates the rotation of its child widget.
RotationTransitionExample.dart
import 'package:flutter/material.dart';
class RotationTransitionExample extends StatefulWidget {
@override
_RotationTransitionExampleState createState() =>
_RotationTransitionExampleState();
}
class _RotationTransitionExampleState extends State<RotationTransitionExample>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
)..repeat();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("RotationTransition Example")),
body: Center(
child: RotationTransition(
turns: _controller,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}main.dart
import 'package:basic_widgets/RotationTransitionExample.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child:RotationTransitionExample()//add code here
)
),
);
}
}AnimatedBuilder
AnimatedBuilder allows building custom animations by reusing an animation controller.
AnimatedBuilderExample.dart
import 'package:flutter/material.dart';
class AnimatedBuilderExample extends StatefulWidget {
@override
_AnimatedBuilderExampleState createState() =>
_AnimatedBuilderExampleState();
}
class _AnimatedBuilderExampleState extends State<AnimatedBuilderExample>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
)..repeat();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("AnimatedBuilder Example")),
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Transform.rotate(
angle: _controller.value * 2 * 3.14159,
child: child,
);
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
main.dart
import 'package:basic_widgets/AnimatedBuilderExample.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child:AnimatedBuilderExample()//add code here
)
),
);
}
}SlideTransition
SlideTransition animates a widget sliding in or out.
SlideTransitionExample.dart
import 'package:flutter/material.dart';
class SlideTransitionExample extends StatefulWidget {
@override
_SlideTransitionExampleState createState() =>
_SlideTransitionExampleState();
}
class _SlideTransitionExampleState extends State<SlideTransitionExample>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<Offset> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0))
.animate(_controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("SlideTransition Example")),
body: Center(
child: SlideTransition(
position: _animation,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
main.dart
import 'package:basic_widgets/SlideTransitionExample.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child:SlideTransitionExample()//add code here
)
),
);
}
}