Flutter - AnimatedSwitcher Widget
Last Updated :
14 Jun, 2025
The AnimatedSwitcher widget in Flutter is used to animate the transition between two or more widgets with a smooth animation. It's often used when you want to switch the display of different widgets within the same space and provide a visual transition effect between them.
In this article, we are going to implement the AnimatedSwitcher widget and explore some of it. A demo video is given below to get an idea of what we are going to do in this article.
Demo Video
Basic Syntax of AnimatedSwitcher
AnimatedSwitcher(
duration: Duration(milliseconds: 500), // Animation duration
child: /* Your child widget */,
)
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step-by-Step Implementations
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: Import the Package
First of all, import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Call the runApp() method in the main() method to start the app.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class, we are going to implement the MaterialApp, Here, we are also setting the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
title: 'AnimatedSwitcher Example',
home: AnimatedSwitcherExample(),
);
}
}
Step 5: Create AnimatedSwitcherExample Class
In this class, we are going to implement the AnimatedSwitcher widget that helps to create a transition between two widgets.
AnimatedSwitcher(
duration: Duration(seconds: 1), // Animation duration
child: _showFirst
? Container(
key: ValueKey<int>(1), // Unique key for the first widget
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Widget 1',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
)
: Container(
key: ValueKey<int>(2), // Unique key for the second widget
width: 200,
height: 200,
color: Colors.green,
child: Center(
child: Text(
'Widget 2',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
),
Code:
Dart
class AnimatedSwitcherExample extends StatefulWidget {
@override
_AnimatedSwitcherExampleState createState() =>
_AnimatedSwitcherExampleState();
}
class _AnimatedSwitcherExampleState extends State<AnimatedSwitcherExample> {
bool _showFirst = true; // Track which widget to display
void _toggleWidgets() {
setState(() {
_showFirst = !_showFirst; // Toggle between two widgets
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedSwitcher Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedSwitcher(
duration: Duration(seconds: 1), // Animation duration
child: _showFirst
? Container(
key: ValueKey<int>(1), // Unique key for the first widget
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Widget 1',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
)
: Container(
key: ValueKey<int>(2), // Unique key for the second widget
width: 200,
height: 200,
color: Colors.green,
child: Center(
child: Text(
'Widget 2',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _toggleWidgets,
child: Text('Toggle Widgets'),
),
],
),
),
);
}
}
Complete Source Code
main.dart:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
title: 'AnimatedSwitcher Example',
home: AnimatedSwitcherExample(),
);
}
}
class AnimatedSwitcherExample extends StatefulWidget {
@override
_AnimatedSwitcherExampleState createState() =>
_AnimatedSwitcherExampleState();
}
class _AnimatedSwitcherExampleState extends State<AnimatedSwitcherExample> {
bool _showFirst = true; // Track which widget to display
void _toggleWidgets() {
setState(() {
_showFirst = !_showFirst; // Toggle between two widgets
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedSwitcher Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedSwitcher(
duration: Duration(seconds: 1), // Animation duration
child: _showFirst
? Container(
key: ValueKey<int>(1), // Unique key for the first widget
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Widget 1',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
)
: Container(
key: ValueKey<int>(2), // Unique key for the second widget
width: 200,
height: 200,
color: Colors.green,
child: Center(
child: Text(
'Widget 2',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _toggleWidgets,
child: Text('Toggle Widgets'),
),
],
),
),
);
}
}
Output:
Similar Reads
Flutter - AnimatedIcon Widget Animation has become a vital part of UI design, whether it be a transition from one window to another or the closing of the window, the animation plays an important role in the smooth representation of the process. Just like that when we click on the icon, it shows animation, or another icon is show
3 min read
Flutter - AnimatedBuilder Widget The AnimatedBuilder widget in Flutter is a powerful utility widget that is used for creating complex animations by rebuilding a part of the widget tree in response to changes in an animation's value. It is especially useful when you want to animate properties of child widgets that cannot be directly
4 min read
Flutter - AnimatedPositioned Widget The AnimatedPositioned widget in Flutter is used to create animated transitions for a widget's position within a Stack. It allows you to smoothly change the position of a child widget by animating the values of the left, top, right, and bottom properties. In this article, we are going to implement t
4 min read
Flutter - AnimatedContainer Widget In Flutter a container is a simple widget with well-defined properties like height, width, and color, etc. The AnimatedContainer widget is a simple container widget with animations. These types of widgets can be animated by altering the values of their properties which are the same as the Container
3 min read
Flutter - AnimatedPhysicalModel Widget In Flutter, the AnimatedPhysicalModel widget is used to create animations that transition between different physical properties of a widget, such as elevation, shape, and colour. In this article, we are going to implement the AnimatedPhysicalModel widget. A sample video is given below to get an idea
4 min read
Flutter - AnimatedCrossFade Widget AnimatedCrossFade Widget creates a fade transition between two widgets when one widget is replaced by another. It is used when you need to give a fade kind of transition in between two widgets. It supports any kind of Flutter Widget like Text, Images, Icon as well as anything that is extended from t
3 min read