IndexedStack is a multilevel widget that can hold multiple child widgets inside it. IndexedStack widget supports a custom property named as index which support integer numeric value. IndexedStack can display only given index number widget from multiple widgets. The index position starts from 0 Zero. If we increase index number then it will load next widget according to given index. If user dose not give the index position then it will display no widget. In this tutorial we would increase the Index number dynamically using Button click event and change the Widgets from screen. So in this tutorial we would learn about Flutter IndexedStack Widget Dart Android iOS Example Tutorial.
Contents in this project Flutter IndexedStack Widget Dart Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root parent class named as MyApp extends with State less widget. In this class we would call the Stack class in body section.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Stack() ) ); } } |
4. Create a class named as Stack extends with State full widget. In this call we would make the createState() method of State and pass the StackState class along with it.
|
1 2 3 4 5 |
class Stack extends StatefulWidget { StackState createState() => StackState(); } |
5. Create a class named as StackState extends with State.
|
1 2 3 4 |
class StackState extends State<Stack>{ } |
5. Create a Integer variable named as indexPosition with default value Zero. We are using this variable as Index position in IndexedStack widget.
|
1 |
int indexPosition = 0 ; |
6. Create a function named as loadNextWidget(). In this function we would increase the indexPosition variable value on each click and when it reaches to 3 we reset the value again to Zero because we have only 3 Child widgets.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
loadNextWidget(){ if(indexPosition < 2){ setState(() { indexPosition ++ ; }); }else{ setState(() { indexPosition = 0 ; }); } } |
7. Create Widget Build area in StackState class. Now we would make Center Widget -> Column widget in body section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('IndexedStack Widget in Flutter')), body: Center(child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ],)) ); } |
8. Creating IndexedStack widget in Column widget with 1 Raised Button widget. We would put 3 Container widgets inside IndexedStack.
- index : We would set the indexPosition variable to it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
IndexedStack( index: indexPosition, children: <Widget>[ Container( width: 200, height: 200, color: Colors.pink, child: Center( child: Text('Widget - 1', style: TextStyle(fontSize: 25, color: Colors.white),)) ), Container( width: 200, height: 200, color: Colors.green, child: Center( child: Text('Widget - 2', style: TextStyle(fontSize: 25, color: Colors.white),)) ), Container( width: 200, height: 200, color: Colors.lightBlue, child: Center( child: Text('Widget - 3', style: TextStyle(fontSize: 25, color: Colors.white),)) ), ], ), Container( margin: const EdgeInsets.fromLTRB(20, 100, 20, 20), child: RaisedButton( onPressed: () => loadNextWidget(), child: Text(' Show Next Widget ', style: TextStyle(fontSize: 20),), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ) |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Stack() ) ); } } class Stack extends StatefulWidget { StackState createState() => StackState(); } class StackState extends State<Stack>{ int indexPosition = 0 ; loadNextWidget(){ if(indexPosition < 2){ setState(() { indexPosition ++ ; }); }else{ setState(() { indexPosition = 0 ; }); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('IndexedStack Widget in Flutter')), body: Center(child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ IndexedStack( index: indexPosition, children: <Widget>[ Container( width: 200, height: 200, color: Colors.pink, child: Center( child: Text('Widget - 1', style: TextStyle(fontSize: 25, color: Colors.white),)) ), Container( width: 200, height: 200, color: Colors.green, child: Center( child: Text('Widget - 2', style: TextStyle(fontSize: 25, color: Colors.white),)) ), Container( width: 200, height: 200, color: Colors.lightBlue, child: Center( child: Text('Widget - 3', style: TextStyle(fontSize: 25, color: Colors.white),)) ), ], ), Container( margin: const EdgeInsets.fromLTRB(20, 100, 20, 20), child: RaisedButton( onPressed: () => loadNextWidget(), child: Text(' Show Next Widget ', style: TextStyle(fontSize: 20),), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ) ],)) ); } } |
Screenshots:
