Flutter - SizeTransition Widget

In this article, we will explore the Flutter SizeTransition widget. The Size Transition Widget is a key tool in Flutter that lets you animate the size of a child widget. It can be used to make a widget appear or vanish, create a zoom-in or zoom-out effect, and for many more things. A sample video is given below to get an idea of what we are going to do in this article.

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Start Coding

Create a stateless widget by writing the following code inside your main.dart file

import 'package:flutter/material.dart';

// entry point of your application
// passing the stateless widget
// inside the runApp Method
void main() => runApp(const SizeTransitionGeeksExample());


// Stateless widget named as SizeTransitionGeeksExample
class SizeTransitionGeeksExample extends StatelessWidget {
  const SizeTransitionGeeksExample({Key? key}); // Widget for the main app

  @override
  Widget build(BuildContext context) {
     // Material app
    return const MaterialApp(
      home: GfgSizeTransition(),
    );
  }
}

// Statefull widget named as GfgSizeTransition
class GfgSizeTransition extends StatefulWidget {
  const GfgSizeTransition({Key? key}); // Widget for the size transition

  @override
  State<GfgSizeTransition> createState() => _GfgSizeTransitionState();
}

/// The following code sets up animations and their curves.
class _GfgSizeTransitionState extends State<GfgSizeTransition>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 3),
    vsync: this,
  )..repeat(); // Animation controller with a repeating animation

  late final Animation<double> _animationa = CurvedAnimation(
    parent: _controller,
    curve: Curves.bounceIn,
  ); // Animation with a bounce-in curve

  late final Animation<double> _animationb = CurvedAnimation(
    parent: _controller,
    curve: Curves.slowMiddle,
  ); // Animation with a slow middle curve

  late final Animation<double> _animationc = CurvedAnimation(
    parent: _controller,
    curve: Curves.fastLinearToSlowEaseIn,
  ); // Animation with a fast linear to slow ease-in curve

  late final Animation<double> _animationd = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeOutQuint,
  ); // Animation with an ease-out quint curve

  late final Animation<double> _animatione = CurvedAnimation(
    parent: _controller,
    curve: Curves.decelerate,
  ); // Animation with a decelerate curve

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.green,
          title: const Text("GFG Size Transition")), // App bar with a title
      // Column contains SizeTrasition Widget
      body: Column(
        children: [
          Container(
            height: 500, // Container with a fixed height
            child: Column(
              children: [
                // SizeTransition widget
                SizeTransition(
                  sizeFactor: _animationa,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),
                // SizeTransition widgets with different animations and alignments
                SizeTransition(
                  sizeFactor: _animationb,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),
                SizeTransition(
                  sizeFactor: _animationc,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),
                SizeTransition(
                  sizeFactor: _animationd,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),
                SizeTransition(
                  sizeFactor: _animatione,
                  axis: Axis.vertical,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),
              ],
            ),
          ),
          // sizedbox widget
          SizedBox(child: const Text("More Explore yourself...")) // Text widget at the end
        ],
      ),
    );
  }
}

Now let’s understand the complete code:

import 'package:flutter/material.dart';

We import flutter/material.dart package so that we can implement the material design, we can use widgets like stateless widgets, materialApp, etc

void main() => runApp(const SizeTransitionGeeksExample());

Every Flutter code has an entry point from the main function. Inside the main function, we call the runApp method provided by the ‘flutter/material.dart’  package, and we pass the widget SizeTransitionGeeksExample as a parameter.

class SizeTransitionGeeksExample extends StatelessWidget {

  const SizeTransitionGeeksExample({Key? key}); // Widget for the main app

  @override
  Widget build(BuildContext context) {
     // Material app
    return const MaterialApp(
         home: GfgSizeTransition(),
      );
   }
}

The SizeTransitionGeeksExample Class is a stateless widget that serves as the main app widget. It returns a MaterialApp widget as the root of the widget tree. The MaterialApp is configured with a home property set to an instance of the GfgSizeTransition widget, which represents the main content of the app

// The following code sets up animations and their curves.
class _GfgSizeTransitionState extends State<GfgSizeTransition> with TickerProviderStateMixin {

   late final AnimationController _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
   )..repeat(); // Animation controller with a repeating animation

   late final Animation<double> _animationa = CurvedAnimation(
      parent: _controller,
      curve: Curves.bounceIn,
   ); // Animation with a bounce-in curve

  late final Animation<double> _animationb = CurvedAnimation(
     parent: _controller,
     curve: Curves.slowMiddle,
  ); // Animation with a slow middle curve

  late final Animation<double> _animationc = CurvedAnimation(
     parent: _controller,
     curve: Curves.fastLinearToSlowEaseIn,
  ); // Animation with a fast linear to slow ease-in curve

  late final Animation<double> _animationd = CurvedAnimation(
     parent: _controller,
     curve: Curves.easeOutQuint,
  ); // Animation with an ease-out quint curve

  late final Animation<double> _animatione = CurvedAnimation(
     parent: _controller,
     curve: Curves.decelerate,
  ); 

• _animationa: This animation causes the visuals to initially enter with a slight bounce before gradually amplifying it.
• _animationb: This animation starts slowly, picks up speed in the middle, and then slows down once again towards the conclusion to provide a seamless and gentle transition for the visuals.
• _animationc: This animation transitions between a faster initial animation and a slower transition by beginning swiftly with a linear motion and then easing in gradually.
• _animationd: A seamless and organic easing-out effect is produced by the animation, which begins with a fast acceleration and then progressively slows down towards the end.
• _animatione: The beginning velocity of this animation is fast, but it gradually decreases over time to produce a decelerating effect.

These animations were produced using various predefined curves from Flutter's Curves class. These animations are driven by the animation controller _controller. It is programmed to loop continuously, producing an animation.

These animations are applied to the images in the UI using the SizeTransition widget. One of the animation objects (_animationa, _animationb, etc.) is assigned as the sizeFactor property of the SizeTransition widget, which controls the size transition behaviour.

@override
void dispose() {
     _controller.dispose();
     super.dispose();
}

dispose() method is used to dispose of the animation controller _controller.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.green,
          title: const Text("GFG Size Transition")), // App bar with a title
      // Column contains SizeTrasition Widget
      body: Column(
        children: [
          Container(
            height: 500, // Container with a fixed height
            child: Column(
              children: [

                // SizeTransition widget
                SizeTransition(
                  sizeFactor: _animationa,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),

                // SizeTransition widgets with different animations and alignments
                SizeTransition(
                  sizeFactor: _animationb,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),

                SizeTransition(
                  sizeFactor: _animationc,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),

                SizeTransition(
                  sizeFactor: _animationd,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),

                SizeTransition(
                  sizeFactor: _animatione,
                  axis: Axis.vertical,
                  axisAlignment: -1,
                  child: Center(
                    child: Image.network(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png'),
                  ),
                ),
              ],
            ),
          ),

          // sizedbox widget
          SizedBox(child: const Text("More Explore yourself...")) // Text widget at the end
        ],
      ),
    );
  }

• The Scaffold widget, which has an appBar and a body, provides the basic structure of the application.
• The appBar is an AppBar widget with a "GFG Size Transition" title text and a green background color.
• A Column widget that organizes its children vertically makes up the body.
• Having a fixed height of 500, the Container widget is the first child of the Column. The SizeTransition widgets are gathered in this container.
• Inside the container, there is another Column widget. This nested Column contains multiple SizeTransition widget.
• Each SizeTransition widget applies a size transition animation to its child widget.
• Each SizeTransition widget's sizeFactor property is set to one of the animation objects (_animationa, _animationb, etc.) previously declared. Based on the corresponding animation, this defines the size transition behavior.
• The axis property of the SizeTransition Widgets are set to either Axis.horizontal or Axis.vertical to control the direction of the size transition.
• The SizeTransition widget axisAlignment attribute is set to -1, which indicates that the child widget should be positioned at the beginning of the axis.
• A SizedBox widget with a child Text widget follows the SizeTransition widgets. The words "More Explore yourself..." are displayed here as a placeholder. The text widget has a defined size thanks to the SizedBox.

Output: