September 8, 2021
Top Five Animation Packages to Use in Your Next Flutter App
DURATION
15mincategories
Tags
share
Well-designed animations improve the user experience by making a UI feel more intuitive. They also contribute to the smooth appearance and feel of a professional product.
In this article, I will show you five animation packages you can use in your next Flutter application.
1. SpinKit
The SpinKit package contains a set of animated loading indicators for use in your projects.
Pub link: https://pub.dev/packages/flutter_spinkit
Github: https://github.com/jogboms/flutter_spinkit
Installation
dependencies:
flutter_spinkit: “<latest_version>”
Why use this package?
To build complex animation from available Spinkit predefined widgets
To animate any widget by adding the widget as a child of any Spinkit predefined widget
Can be used in a StatelessWidget or StatefulWidget
Basic Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
void main() {
runApp(SpinKitDemo());
}
class SpinKitDemo extends StatelessWidget {
final _loading = ValueNotifier(false);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SpinKit Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Scaffold(
body: Center(
child: ValueListenableBuilder(
valueListenable: _loading,
builder: (BuildContext context, bool value, Widget child) {
if (value) {
return SpinKitFadingCircle(
color: Colors.red,
size: 50.0,
);
} else {
return ElevatedButton(
onPressed: () async {
try {
_loading.value = true;
await Future.delayed(const Duration(seconds: 5));
} finally {
_loading.value = false;
}
},
child: Text('Login'));
}
},
),
),
),
);
}
}
2. Animations
These are official pre-canned animations for commonly-used effects. You can tweak the animations with your content and place them into your app to amuse your users.
Material motion is a set of transition patterns that assist users to understand and navigate an app. It now supports four different transition patterns.
The following transition patterns are defined by material motion:
Container transform
Shared axis
Fade through
Fade
Pub link: https://pub.dev/packages/animations
Github: https://github.com/flutter/packages/tree/master/packages/animations
Installation
dependencies:
animations: “<latest_version>”
Why use this package?
To include smooth transition patterns that help the user navigate your apps
To include motion animation in your application according to material design motion specifications
To improve the user experience of your application
Basic Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import 'package:animations/animations.dart';
import 'package:flutter/material.dart';
void main() {
runApp(AnimationsDemo());
}
class AnimationsDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animations Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: ContainerTransformDemo(),
);
}
}
class ContainerTransformDemo extends StatefulWidget {
const ContainerTransformDemo({
Key key
}): super(key: key);
@override
_ContainerTransformDemoState createState() {
return _ContainerTransformDemoState();
}
}
class _ContainerTransformDemoState extends State < ContainerTransformDemo > {
ContainerTransitionType _transitionType = ContainerTransitionType.fade;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Container transform demo'),
),
body: ListView(
padding: const EdgeInsets.all(8.0),
children: <Widget>[
...List<Widget>.generate(10, (int index) {
return OpenContainer<bool>(
transitionType: _transitionType,
openBuilder: (BuildContext _, VoidCallback openContainer) {
return _DemoDetailsPage();
},
closedShape: const RoundedRectangleBorder(),
closedElevation: 0.0,
closedBuilder: (BuildContext _, VoidCallback openContainer) {
return ListTile(
onTap: openContainer,
title: Text('Title item {index + 1}'),
subtitle: const Text('subtitle text'),
);
},
);
}),
],
),
);
}
}
class _DemoDetailsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Demo details page'),
),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Title',
style: Theme.of(context).textTheme.headline5.copyWith(
color: Colors.black54,
fontSize: 30.0,
),
),
const SizedBox(height: 10),
Text(
'Demo details page',
style: Theme.of(context).textTheme.bodyText2.copyWith(
color: Colors.black54,
height: 1.5,
fontSize: 16.0,
),
),
],
),
),
],
),
);
}
}
3. Simple Animations
Simple Animations is a strong animation package that allows you to quickly build beautiful bespoke animations.
Pub link: https://pub.dev/packages/simple_animations
Github: https://github.com/felixblaschke/simple_animations
Installation
dependencies:
simple_animations: “<latest_version>”
Why use this package?
Create custom animations using stateless widgets
Animate multiple properties using TimelineTwin
Doesn’t need an elaborate setup of animation controller and ticker provider
Basic Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(child: SimpleAnimationDemo(), ),
),
));
}
class SimpleAnimationDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PlayAnimation < double > (
tween: Tween(begin: 0.0, end: 200),
duration: const Duration(seconds: 2),
curve: Curves.ease,
builder: (context, child, value) {
return Container(
width: value,
height: value,
color: Colors.red,
);
},
);
}
}
4. Staggered Animations
A useful animation package for adding staggered animations to your ListView, GridView, Column, and Row children per Material Design principles.
Pub link: https://pub.dev/packages/flutter_staggered_animations
Github link: https://github.com/mobiten/flutter_staggered_animations
Installation
dependencies:
flutter_staggered_animations: “<latest_version>”
Why use this package?
To show animated list view, grid view, or column
To improve the user experience of your application
Basic Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
mport 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(child: StaggeredAnimationDemo(), ),
),
));
}
class StaggeredAnimationDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: AnimationLimiter(
child: ListView.builder(
padding: const EdgeInsets.all(8.0),
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return AnimationConfiguration.staggeredList(
position: index,
duration: const Duration(seconds: 1),
child: SlideAnimation(
verticalOffset: 44.0,
child: FadeInAnimation(
child: Card(
child: ListTile(
title: Text('$index item'),
),
),
),
),
);
},
),
),
),
);
}
}
5. Spring
A simple and powerful pre-built animation kit for creating apps quickly and easily. You can use it to add intriguing motion effects to your widgets, such as pop, shake, and flip. These animations can be utilized to improve usability in your apps if applied correctly.
Pub link: https://pub.dev/packages/spring
Github link: https://github.com/KaushickSArgekar/spring
Installation
dependencies:
spring: “<latest_version>”
Why use this package?
Get a lot of pre-built animation for common use cases
To animate any widget by adding the widget as a child of any Spring pre-built widgets
Basic Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import 'package:flutter/material.dart';
import 'package:spring/spring.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('SpringDemo'),
),
body: Center(
child: SpringDemo(),
),
),
));
}
class SpringDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Spring.scale(start: 0.2, end: 1.0, child: _RedCard()),
Spring.slide(slideType: SlideType.slide_in_left, child: _RedCard()),
Spring.shake(child: _RedCard()),
Spring.rotate(child: _RedCard()),
],
);
}
}
class _RedCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.red, borderRadius: BorderRadius.circular(6)),
);
}
}