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: