In this article, you will learn about IndexedStack Widget in Flutter. Here is the complete guide where you will learn how to use indexedStack widget in Flutter. Read the article for more details.

2. How to Use IndexedStack Widget In Flutter?
The application is built by settling how the widgets interact with one
another. It suggests that the basis of your application is a widget.
Nearly everything in Flutter is a widget, including layout models. The
widgets are where you will find the images, icons, and text in a Flutter
application. The rows, columns, and grids that arrange, constrain, and
align the evident widgets are examples of non-visible extra widgets.
In this article, we will Explore IndexedStack Widget In Flutter.
Here is the constructor of the IndexStack widget.

3. IndexedStack(
{Key? key,
AlignmentGeometry alignment=AlignmentDirectional.topStart,
TextDirection? textDirection,
StackFit sizing = StackFit.loose,
int? index = 0,
List<widget> children = const <widget>[]}
)</widget></widget>

4. alignment: The non-positioned and partially-positioned children in the
stack are aligned using these attributes.
text direction: These properties are used to determine alignment
based on the text direction.
sizing: The non-positioned children in the stack are sized using these
properties.
index: These attributes are used to display the child’s index.
children: The List uses these properties.

5. An IndexedStack is a stack in which its index only allows for the display
of one component at a time.
a stack that displays a single child from a group of children. It is the
child with the specified index who is being shown.
How to construct a custom navigation bar in flutter is demonstrated in
the below demo. It demonstrates how a Flutter mobile application
development company will use the IndexedStack widget to create a
custom navigation bar.
Let’s see a full example of an IndexStack widget.

6. import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: IndexStackDemo()));
class IndexStackDemo extends StatefulWidget {
const IndexStackDemo({Key? key}) : super(key: key);
@override
_IndexStackDemoState createState() => _IndexStackDemoState();
}
class _IndexStackDemoState extends State<indexstackdemo> {
int index = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Indexed Stack Demo'),
),
body: Padding(
child: Column(
children: <widget>[_stackedContainers(), _navigationButtons()],
),
padding: const EdgeInsets.all(5.0),
),
);
}

7. Widget _stackedContainers() {
return Expanded(
child: IndexedStack(
index: index,
children: const <widget>[
Center(
child: Icon(
Icons.home,
size: 100,
),
),

8. Center(
child: Icon(
Icons.list,
size: 100,
),
),
Center(
child: Icon(
Icons.settings,
size: 100,
),
),
],
),
);
}

9. Widget _navigationButtons() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <widget>[
ElevatedButton(
child: const Text(
'Home',
style: TextStyle(fontSize: 16.0, color: Colors.white),
),
onPressed: () {
setState(() {
index = 0;
});
},
),

10. ElevatedButton(
child: const Text(
'List',
style: TextStyle(fontSize: 16.0, color: Colors.white),
),
onPressed: () {
setState(() {
index = 1;
});
},
),

11. ElevatedButton(
child: const Text(
'Settings',
style: TextStyle(fontSize: 16.0, color: Colors.white),
),
onPressed: () {
setState(() {
index = 2;
});
},
),
],
);
}
}</widget></widget></widget></indexstackdemo>

12. Output:

13. Conclusion:
Today our Flutter experts has given a basic explanation of the
IndexedStack Widget’s fundamental structure in the article; you are
free to change the code as you see fit. This was a brief introduction
from my end to the IndexedStack Widget On User Interaction, which
utilizes Flutter to function.
Source: https://flutteragency.com/use-indexedstack-widget/