Flutter IndexedStack Tutorial with Examples

IndexedStack
Examples
children
index
fit (sizing)
textDirection
alignment

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.

Flutter Stack

IndexedStack constructor

IndexedStack(
  {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.

Flutter SizedBox

2. Examples

A simple example of IndexedStack:

main.dart (ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  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 {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {

  int selectedIndex = 1;

  @override
  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>[
              Container(
                width: 290,
                height: 210,
                color: Colors.green,
              ),
              Container(
                width: 250,
                height: 170,
                color: Colors.red,
              ),
              Container(
                width: 220,
                height: 150,
                color: Colors.yellow,
              ),
            ]
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () {
          setState(() {
            if(this.selectedIndex < 2)  {
              this.selectedIndex++;
            } 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:
 StackFit.expand
 StackFit.loose
 StackFit.passthrough

Flutter StackFit

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

Flutter Alignment