Flutter Simple Animation - Animate widget while increase font size

Last updated Jul 25, 2021

In 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

 

Flutter basic animation Example

 

 

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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

497 Views