Flutter - Implement IndexedStack Widget
Last Updated :
24 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
Flutter - ImageFiltered Widget
In Flutter it's straightforward to blur the background image using Image Filtered Widget. A filter operation is used to scan the image. ImageFiltered is a widget that applies ImageFilter to its children to blur the image. ImageFilter Constructorconst ImageFiltered({ Key? key, required this.imageFilt
3 min read
Flutter - Positioned Widget
Positioned is a widget that comes built-in with flutter SDK. Positioned does exactly what it sounds like, which is it arbitrarily positioned widgets on top of each other. It is usually used to position child widgets in Stack widget or similar. It only works for Stateless and Stateful widgets. Constr
3 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
Table Widget in Flutter
Table widget is used to display items in a table layout. There is no need to use Rows and Columns to create a table. If we have multiple rows with the same width of columns then Table widget is the right approach. SliverList or Column will be most suitable if we only want to have a single column. Th
3 min read
Implementing Rest API in Flutter
Along with building a UI in Flutter, we can also integrate it with the backend. Most applications use APIs to display user data. We will use the http package, which provides advanced methods to perform operations. REST APIs use simple HTTP calls to communicate with JSON data because:It uses await
5 min read