Flutter IndexedStack Widget Dart Android iOS Example Tutorial

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.

2. Create void main runApp() method and here we would call our main MyApp class.

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.

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.

5. Create a class named as StackState extends with State.

5. Create a Integer variable named as indexPosition with default value Zero. We are using this variable as Index position in IndexedStack widget.

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.

7. Create Widget Build area in StackState class. Now we would make Center Widget -> Column widget in body section.

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.

9. Complete source code for main.dart file:

Screenshots:

Flutter IndexedStack Widget Dart Android iOS Example Tutorial

Flutter IndexedStack Widget Dart Android iOS Example Tutorial

Leave a Reply

Your email address will not be published.