Flutter - Implement IndexedStack Widget
Last Updated :
28 Apr, 2025
The IndexedStack widget in Flutter is used to display a single child from a list of children at a given index. It's commonly used when you want to show one child widget while hiding the others, such as in a tabbed interface. In this article, we are going to implement the IndexedStack widget and explore some properties of it. A sample video is given below to get an idea about what we are going to do in this article.
Basic Syntax of IndexedStack Widget
Dart
IndexedStack(
index: /* Index of the child to display */,
children: <Widget>[
/* List of child widgets to stack on top of each other */
ChildWidget1(),
ChildWidget2(),
// Add more child widgets as needed
],
)
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementations
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to 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
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
title: 'IndexedStack Example',
home: IndexedStackExample(),
);
}
}
Step 5: Create IndexedStackExample Class
In this class we are going to Implement the IndexedStack widget that help to display a single child from a list of children at a given position. Comments are added for better understanding.
IndexedStack(
index: _currentIndex, // Index of the child to display
children: [
// Child 1
Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Child 1',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
// Child 2
Container(
width: 200,
height: 200,
color: Colors.green,
child: Center(
child: Text(
'Child 2',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
],
),
Dart
class IndexedStackExample extends StatefulWidget {
@override
_IndexedStackExampleState createState() => _IndexedStackExampleState();
}
class _IndexedStackExampleState extends State<IndexedStackExample> {
// Index to control which child to display
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('IndexedStack Example'),
),
body: Column(
children: [
// Buttons to switch between children
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
// Show the first child
_currentIndex = 0;
});
},
child: Text('Child 1'),
),
SizedBox(width: 20),
ElevatedButton(
onPressed: () {
setState(() {
// Show the second child
_currentIndex = 1;
});
},
child: Text('Child 2'),
),
],
),
SizedBox(height: 20),
// IndexedStack to display children
IndexedStack(
// Index of the child to display
index: _currentIndex,
children: [
// Child 1
Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Child 1',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
// Child 2
Container(
width: 200,
height: 200,
color: Colors.green,
child: Center(
child: Text(
'Child 2',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
],
),
],
),
);
}
}
Here is the full Code of main.dart file:
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: 'IndexedStack Example',
home: IndexedStackExample(),
);
}
}
class IndexedStackExample extends StatefulWidget {
@override
_IndexedStackExampleState createState() => _IndexedStackExampleState();
}
class _IndexedStackExampleState extends State<IndexedStackExample> {
int _currentIndex = 0; // Index to control which child to display
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('IndexedStack Example'),
),
body: Column(
children: [
// Buttons to switch between children
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
_currentIndex = 0; // Show the first child
});
},
child: Text('Child 1'),
),
SizedBox(width: 20),
ElevatedButton(
onPressed: () {
setState(() {
_currentIndex = 1; // Show the second child
});
},
child: Text('Child 2'),
),
],
),
SizedBox(height: 20),
// IndexedStack to display children
IndexedStack(
index: _currentIndex, // Index of the child to display
children: [
// Child 1
Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Child 1',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
// Child 2
Container(
width: 200,
height: 200,
color: Colors.green,
child: Center(
child: Text(
'Child 2',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
],
),
],
),
);
}
}
Output:
Similar Reads
Flutter - Implement SwitchListTile Widget The SwitchListTile widget in Flutter is a combination of a ListTile and a switch. It provides a user-friendly way to toggle a boolean setting or option within your app. Here's how you can implement a SwitchListTile widget. A sample video is given below to get an idea about what we are going to do in
6 min read
Flutter - Stack Widget The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
TextSpan Widget in Flutter TextSpan is an immutable span of text. It has style property to give style to the text. It is also having children property to add more text to this widget and give style to the children. Let's understand this with the help of an example. Constructors:Syntax: TextSpan({String text, List<InlineSpa
3 min read
Flutter - Implement map() Method In Flutter, the map() method is used to transform and manipulate the elements of a collection (such as a List, Set, or Iterable) and produce a new collection with the transformed values. It allows you to apply a function to each element of the collection and create a new collection based on the resu
4 min read
What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
OffStage Widget in Flutter Flutter provides an inbuilt widget called “Offstageâ€, which is been used to hide or show any widget programmatically depending on user action/event. Offstage Widget is a widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit
4 min read