IndexedStack in Flutter with Example

<p>In this article, I'm going to brief about IndexedStack Widget in Flutter. As per Flutter documentation, font-size: 1rem;](IndexedStack is a Stack that shows a single child from a list of children. The displayed child is the one with the given index. The stack is always as big as the largest child. If the value is null, then nothing is displayed. Here is an example that you can try. Final output will looks like this. On button click the widget inside the IndexedStack will change. ![](https://fluttercentral.com/Uploads/243d656c-3bf4-4913-a0fd-d78c088d0eb2.gifwidth="50%height="auto](</p> <p id="b5cea8;](0;" i="color:">Copy-paste the code into your main.dart file and run to see the output. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void main() => runApp(MyApp()); color: #569cd6;](class MyApp color: #569cd6;](extends StatefulWidget { color: #569cd6;](@override _MyAppState createState() => _MyAppState();} color: #569cd6;](class _MyAppState color: #569cd6;](extends State { int i = color: #b5cea8;](2; color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return MaterialApp( title: color: #ce9178;]("IndexedStack Example", home: Scaffold( appBar: AppBar(title: Text(color: #ce9178;]("IndexedStack Example")), body: Column( children: [ Expanded( child: IndexedStack( index: i, children: [ Container(color: Colors.red,), Container(color: Colors.green), Container(color: Colors.blue), ], ), ), RaisedButton( onPressed: () { setState(() { color: #569cd6;](if(i < color: #b5cea8;](2){ i++; } color: #569cd6;](else }); }, child: Text(color: #ce9178;]('Show Next Widget'), ) ], ), ), ); }}</p> <p>Thanks,Srikanth</p>