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 about what we are going to do in this article.
Step By Step Implementation
Step 1: Open your VS-code create a Flutter Application And Installing Module using the following steps:
- Open the Command Palette (Ctrl+Shift+P (Cmd+Shift+P on macOS)).
- Select the Flutter: New Project command and press Enter.
- Select Application and press Enter.
- Select a Project location.
- Enter your desired Project name.
Now your project structure looks like this:
Step 2: Create a stateless widget by writing the following code inside your main.dart file
Dart
import 'package:flutter/material.dart' ; // entry point of your application // passing the stateless widget // inside the runApp Method void main() => runApp( const SizeTransitionBeginnerExample()); // Stateless widget named as SizeTransitionBeginnerExample class SizeTransitionBeginnerExample extends StatelessWidget { const SizeTransitionBeginnerExample({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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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 SizeTransitionBeginnerExample());
Every flutter code has an entry point from the main function, inside the main function we call the runApp method provided by ‘flutter/material.dart’ package and we pass the widget SizeTransitionBeginnerExample as a parameter.
class SizeTransitionBeginnerExample extends StatelessWidget {
const SizeTransitionBeginnerExample({Key? key}); // Widget for the main app
@override
Widget build(BuildContext context) {
// Material app
return const MaterialApp(
home: GfgSizeTransition(),
);
}
}
The SizeTransitionBeginnerExample
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 off 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();
}
The 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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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 widgets.
- 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 theSizeTransition
widgets are set to eitherAxis.horizontal
orAxis.vertical
to control the direction of the size transition. - SizeTransition widgets 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…” is displayed here as a placeholder. The text widget has a defined size thanks to the SizedBox.
Step 3: Run the following code by selecting the Android emulator or on your physical device by connecting it.
Output: