Flutter IndexedStack Tutorial with Examples

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- IndexedStack

IndexedStack is a subclass of Stack. Unlike Stack, IndexedStack only displays at most one widget at a time, and hide other widgets. You can specify which child widget to be displayed through index property. If the index is null, no child widgets will be displayed.
IndexedStack constructor

  {Key key,
  AlignmentGeometry alignment: AlignmentDirectional.topStart,
  TextDirection textDirection,
  StackFit sizing: StackFit.loose,
  int index: 0,
  List<Widget> children: const <Widget>[]}
Basically, IndexedStack's size is as small as possible, and tries to be larger than all its children (Except for the Positioned or Transform ones).
You can control the size of IndexedStack by placing it in a SizedBox.

2- Examples

A simple example of IndexedStack:
main.dart (ex1)

import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      home: MyHomePage(),

class MyHomePage extends StatefulWidget {
  State<StatefulWidget> createState() {
    return _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {

  int selectedIndex = 1;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Flutter IndexedStack Example")
      body: SizedBox (
        width: double.infinity,
        height: double.infinity,
        child: IndexedStack (
            alignment: Alignment.center,
            index: this.selectedIndex,
            children: <Widget>[
                width: 290,
                height: 210,
                color: Colors.green,
                width: 250,
                height: 170,
                color: Colors.red,
                width: 220,
                height: 150,
                color: Colors.yellow,
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () {
          setState(() {
            if(this.selectedIndex < 2)  {
            } else {
              this.selectedIndex = 0;

3- children

children - is a list of child widgets of IndexedStack.

List<Widget> children: const <Widget>[]}

4- index

index: Index of the child widget will be displayed, its default value is 0. If the index is null, no child widgets will be displayed.

int index: 0

5- fit (sizing)

sizing parameter in the IndexedStack's constructor will assign a value to fit property. It shows "How to size for child widgets other than Positioned of IndexedStack". The default value of fit property is StackFit.loose.

StackFit sizing: StackFit.loose

// Enum:
  • TODO Link?

6- textDirection

textDirection property is used to set text's direction. Its value affects behavior of alignment property.

TextDirection textDirection

7- alignment

alignment property is used to align widgets other than Positioned. Its default value is AlignmentDirectional.topStart.

AlignmentGeometry alignment: AlignmentDirectional.topStart

View more Tutorials: