Flutter Simple Animation - Animate widget while increase font size
Last updated Jul 25, 2021In this flutter animation example we will learn how to animate a flutter widget while increase font size.
We will cover
Create Animation Object
Handle Animation with Animation Controller
Apply Animation to the widget
Let's get started
Step 1: Create Flutter Application
Step 2: Import Animation packages to the dart file
import 'package:flutter/animation.dart';
|
Step 3: When we want to work with Animations we need to extend our Statefull widget with SingleTickerProviderStateMixin
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
}
|
Step 4: Create Animation Object
late Animation<double> animation;
animation = Tween<double>(begin: 12.0, end: 50.0).animate(controller)
..addListener(() {
});
|
To work with animation we need to create animation controller to handle the animation
Step 5: Create Animation Controller Object
AnimationController(duration: const Duration(seconds: 1), vsync: this);
|
Step 6: Apply Animation on button tap event
Here we have two buttons to increase fontsize by applying the animation and other is decrease by reverse the animation
void increaseFontSize() {
controller.forward();
}
void descreaseFontSize() {
controller.reverse();
}
|
Step 7: Run application and check the animation effects
![]() |
Complete code
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
late Animation<double> animation;
late AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 1), vsync: this);
animation = Tween<double>(begin: 12.0, end: 50.0).animate(controller)
..addListener(() {
});
}
void increaseFontSize() {
controller.forward();
}
void descreaseFontSize() {
controller.reverse();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(child: Text('Flutter Animation- rrtutors.com')),
),
body: Column(children: [ Container(
margin: EdgeInsets.all(20),
child: Text(
'Hello! Welcome to RRTutors. A very simple animation in Flutter.',
style: TextStyle(fontSize: animation.value),
)),
MaterialButton(
color: Colors.green,
textColor: Colors.white,
onPressed: () => {increaseFontSize()},
child: Text('Increase Font'),
),
MaterialButton(
color: Colors.red,
textColor: Colors.white,
onPressed: () => {descreaseFontSize()},
child: Text('Descrease Font'),
)
],),
));
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
|
Conclusion: In this flutter example we covered how to make simple animation with flutter widget.
Article Contributed By :
|
|
|
|
680 Views |