mydomain
No ADS
No ADS

Flutter IndexedStack Tutorial with Examples

  1. IndexedStack
  2. Examples
  3. children
  4. index
  5. fit (sizing)
  6. textDirection
  7. alignment

1. IndexedStack

No ADS
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
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.

2. Examples

No ADS
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)

No ADS
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
No ADS

Flutter Programming Tutorials

Show More
No ADS