Table Of Content
Flutter IndexedStack Tutorial with Examples
View more Tutorials:
Follow us on our fanpages to receive notifications every time there are new articles.
Facebook
Twitter
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.
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;
}
});
},
),
);
}
}
children - is a list of child widgets of IndexedStack.
List<Widget> children: const <Widget>[]}
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
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
- TODO Link?
textDirection property is used to set text's direction. Its value affects behavior of alignment property.
TextDirection textDirection
alignment property is used to align widgets other than Positioned. Its default value is AlignmentDirectional.topStart.
AlignmentGeometry alignment: AlignmentDirectional.topStart
