IndexedStack Widget

What is IndexedStack Widget?

The IndexStack widget is to show a single child from a list of children, to display single child you must provide index value of that child. If value is null, then nothing is displayed.

Default Constructor

The default constructor creates a Stack widget that paints a single child. The index argument must not be null, its defaults to 0 to show its first child.

IndexedStack(
    alignment: AlignmentDirectional.topStart, //default
    textDirection:
    sizing: StackFit.loose, //default
    index: 0 // default
    children: const <Widget>[],
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The alignment parameter is to align the position of the children in the stack.

The index parameter is to provide the index of the child to show.

The textDirection is to define the text direction with which to resolve alignment.

The sizing parameter is to size the non-positioned children of a Stack. StackFit.loose The constraints passed to the stack from its parent are loosened.

The children parameter is to add list of child widgets below IndexedStack widget in the tree.

Code snippet

This code snippet shows how to configure IndexedStack widget with different parameters values.

IndexedStack(
      alignment: AlignmentDirectional.topStart,
      index: 1,
      textDirection: TextDirection.ltr,
      sizing: StackFit.loose,
      children: <Widget>[
        Container(
          child: Center(
            child: Text('first child widget'),
          ),
        ),
        Container(
          child: Center(
            child: Text('second child wiget'),
          ),
        )
      ],
);

Demo Code

This example shows creation of IndexedStack widget, configured index value to 1 which shows its second child.

import 'package:flutter/material.dart';

class IndexedStackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      alignment: AlignmentDirectional.topStart,
      index: 1,
      textDirection: TextDirection.ltr,
      sizing: StackFit.loose,
      children: <Widget>[
        Container(
          child: Center(
            child: Text('first child widget'),
          ),
        ),
        Container(
          child: Center(
            child: Text('second child wiget'),
          ),
        )
      ],
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'IndexedStack Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Material(child: IndexedStackDemo()),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());