In this article, I'm going to brief about IndexedStack Widget in Flutter.
Thanks,
As per Flutter documentation, 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.
Copy-paste the code into your main.dart file and run to see the output.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int i = 2;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "IndexedStack Example",
home: Scaffold(
appBar: AppBar(title: Text("IndexedStack Example")),
body: Column(
children: <Widget>[
Expanded(
child: IndexedStack(
index: i,
children: <Widget>[
Container(color: Colors.red,),
Container(color: Colors.green),
Container(color: Colors.blue),
],
),
),
RaisedButton(
onPressed: () {
setState(() {
if(i < 2){
i++;
} else{
i = 0;
}
});
},
child: Text('Show Next Widget'),
)
],
),
),
);
}
}
Srikanth