Flutter – TweenAnimationBuilder Widget

In this article, we will learn about how to implement TweenAnimationBuilder Widget. Widget builder that animates a widget’s property to a target value whenever the target value changes. A sample video is given below to get an idea about what we are going to do in this article.

Constructor

const TweenAnimationBuilder({
    Key? key,
    required this.tween,
    required Duration duration,
    Curve curve = Curves.linear,
    required this.builder,
    VoidCallback? onEnd,
    this.child,
  })

TweenAnimationBuilder Widget has the required parameters:

• Tween: If the tween is of type double then it animates from Tween.begin to Tween.end
• Duration: Duration is the set time for which the animation will run
• Builder: Builder helps us build what needs to be built using animation.

Implementation of TweenAnimationBuilder Widget

Step 1: Creating an AppBar

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double targetValue = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          // creating an Appbar
        appBar: AppBar(
          title: Text("GeeksforGeeks"),
          centerTitle: true,
        ),
       );
  }
}

Output:

Step 2: Adding TweenAnimationbuilder Widget

• Set targetValue = 100
• Inside center widget add Tween Animation builder
• Tween will have the type of Tween<double> which will begin at 0 and end at the targetValue
• Now we will add a duration of 500 milliseconds
• Next, we will add builder function which will return an Iconbutton
• We will add properties in IconButton – IconSize, color, Icon will be flutter dash
• Now onpressed will have setstate and this will be responsible for changing the targetValues

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double targetValue = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // creating an Appbar
        appBar: AppBar(
          title: Text("GeeksforGeeks"),
          centerTitle: true,
        ),
        body: Center(
          // Using TweenAnimationBuilder Widget
          child: TweenAnimationBuilder(
            // Tween of double type with begin and the end
            tween: Tween<double>(begin: 0, end: targetValue),
            duration: Duration(
                milliseconds: 500), // duration which is required parameter
            // builder function that helps build the animation
            builder: (BuildContext context, double size, Widget? child) {
              return IconButton(
                iconSize: size,
                color: Colors.orangeAccent,
                icon: Icon(Icons.flutter_dash),
                onPressed: () {
                  setState(() {
                    // Logic
                    // targetValue if equal to 100 then make
                    // icon size big to 250 else make it small to 100
                    targetValue = targetValue == 100 ? 250 : 100;
                  });
                },
              );
            },
          ),
        ));
  }
}

Output:

Explanation: When we click on the Flutter_dash icon we can see that the size of the icon changes. This is done with the help of the TweenAnimationBuilder Widget. In this widget, we have targetValue that changes due to which this animation takes place.