Stack & IndexedStack In Flutter

Hi, folks let’s understand the Stack & IndexedStack in Flutter.
The stack is a widget in Flutter that contains a list of widgets and positions them on top of each other.
An IndexedStack is a stack where just one component is displayed at one time by its index
In Flutter app development developers use these widgets in various places in order to enhance the app UI.

You can also check out our Flutter app development services for more Flutter app development.

Stack Widget

The stack widget contains a list of widgets and places them on top of each other. And it places their children on top of each other like a stack of books. In other words, the stack widget would overlap multiple widgets on one screen. As you can add different images or colors using containers in it.

Stack({
  this.alignment = Alignment.topCenter,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})

Stack({

this.alignment = Alignment.topCenter,

this.textDirection,

this.fit = StackFit.loose,

this.overflow = Overflow.clip,

List<Widget> children = const <Widget>[],

})

alignment :

–> It basically determines the placement of the Non-positioned Widget available in Stack.

textDirection :

–> One can change the direction of text, whether it should start from left to right (LTR) or right to left (RTL). Which becomes quite handy while working with multiple languages.

fit :

–> This property decided how the non-positioned children in the Stack will fill the space available.

–> fit has three types of StackFit.loose, StackFit.expand, StackFit.passthrough

overflow :

–> To manage whether the overflowing content of the child widget should be clipped, or remain as it is, like-: visible.

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 90,
      height: 90,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

Stack(

children: <Widget>[

Container(

width: 100,

height: 100,

color: Colors.red,

Container(

width: 90,

height: 90,

color: Colors.green,

Container(

width: 80,

height: 80,

color: Colors.blue,

)

Positioned Widget:

The Positioned widgets are related to the position of some widgets. The right-positioned widgets allow us to control this. A child of that stack is positioned on the inside of the stack.

Positioned(
  height: 0,
  width: 0,
  left: 0,
  right: 0,  
  top: 0,
  bottom: 0,
  child:(),
)

Positioned(

height: 0,

width: 0,

left: 0,

right: 0,

top: 0,

bottom: 0,

child:(),

)

height: we can give a specific height to a widget.

width: we can give a specific width to a widget.

left: set margin/padding from the left side of the widget.

right: set margin/padding from the right side of the widget.

top: set margin/padding from the top side of the widget.

bottom: set margin/padding from the bottom side of the widget.

IndexedStack Widget

An IndexedStack is a stack where only one component is shown at one time by its index. A Stack that shows a solitary child from a list of children. The showed child is the one with the given index. The stack is consistently just about as large as the biggest child. On the off chance that the value is null, nothing is shown.

IndexedStack({
        AlignmentGeometry alignment = AlignmentDirectional.topStart,
        TextDirection ? textDirection,
        Clip clipBehavior = Clip.hardEdge,
        StackFit sizing = StackFit.loose,
        int ? index = 0,
        List<Widget> children = const <Widget>[]
      })

IndexedStack({

AlignmentGeometry alignment = AlignmentDirectional.topStart,

TextDirection ? textDirection,

Clip clipBehavior = Clip.hardEdge,

StackFit sizing = StackFit.loose,

int ? index = 0,

List<Widget> children = const <Widget>[]

})

alignment: The non-positioned and partially-positioned children in the stack are aligned using these attributes.

text direction: These properties are used to determine alignment based on the text direction.

sizing: The non-positioned children in the stack are sized using these properties.

index: These attributes are used to display the child’s index.

children: The List uses these properties.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const IndexedStackNavigationBarDemo(),
    );
  }
}

class IndexedStackNavigationBarDemo extends StatefulWidget {
  const IndexedStackNavigationBarDemo({Key? key}) : super(key: key);

  @override
  _IndexedStackNavigationBarDemoState createState() =>
      _IndexedStackNavigationBarDemoState();
}

class _IndexedStackNavigationBarDemoState
    extends State<IndexedStackNavigationBarDemo> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.pink[300],
        title: const Text('Flutter Indexed Stack Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Column(
          children: <Widget>[_indexedStackContainers(), _navigationButtons()],
        ),
      ),
    );
  }

  Widget _indexedStackContainers() {
    return Expanded(
      child: IndexedStack(
        index: index,
        children: const <Widget>[
          Center(child: Icon(Icons.home)),
          Center(child: Icon(Icons.settings)),
          Center(child: Icon(Icons.person)),
        ],
      ),
    );
  }

  Widget _navigationButtons() {
    TextStyle textStyle = const TextStyle(fontSize: 16.0, color: Colors.white);
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        TextButton(
          onPressed: () {
            setState(() {
              index = 0;
            });
          },
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.black)),
          child: Text('Home', style: textStyle),
        ),
        TextButton(
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.black)),
          onPressed: () {
            setState(() {
              index = 1;
            });
          },
          child: Text('Settings', style: textStyle),
        ),
        TextButton(
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.black)),
          onPressed: () {
            setState(() {
              index = 2;
            });
          },
          child: Text('Profile', style: textStyle),
        ),
      ],
    );
  }
}

100

101

102

103

104

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const IndexedStackNavigationBarDemo(),

);

}

class IndexedStackNavigationBarDemo extends StatefulWidget {

const IndexedStackNavigationBarDemo({Key? key}) : super(key: key);

@override

_IndexedStackNavigationBarDemoState createState() =>

_IndexedStackNavigationBarDemoState();

}

class _IndexedStackNavigationBarDemoState

extends State<IndexedStackNavigationBarDemo> {

int index = 0;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

automaticallyImplyLeading: false,

backgroundColor: Colors.pink[300],

title: const Text('Flutter Indexed Stack Demo'),

body: Padding(

padding: const EdgeInsets.all(5.0),

child: Column(

children: <Widget>[_indexedStackContainers(), _navigationButtons()],

);

}

Widget _indexedStackContainers() {

return Expanded(

child: IndexedStack(

index: index,

children: const <Widget>[

Center(child: Icon(Icons.home)),

Center(child: Icon(Icons.settings)),

Center(child: Icon(Icons.person)),

);

}

Widget _navigationButtons() {

TextStyle textStyle = const TextStyle(fontSize: 16.0, color: Colors.white);

return Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: <Widget>[

TextButton(

onPressed: () {

setState(() {

index = 0;

});

style: ButtonStyle(

backgroundColor: MaterialStateProperty.all(Colors.black)),

child: Text('Home', style: textStyle),

TextButton(

style: ButtonStyle(

backgroundColor: MaterialStateProperty.all(Colors.black)),

onPressed: () {

setState(() {

index = 1;

});

child: Text('Settings', style: textStyle),

TextButton(

style: ButtonStyle(

backgroundColor: MaterialStateProperty.all(Colors.black)),

onPressed: () {

setState(() {

index = 2;

});

child: Text('Profile', style: textStyle),

);

}

That’s all for this Article 🎊 .

Conclusion

We learned about Stack and IndexedStack in Flutter in this blog.

Visit the link for additional information on the Stack in Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

Parveen Baghel

28 Apr, 2023
Updated by - Parveen Baghel
28 Feb, 2023
Created by - Parveen Baghel

. . .

Stack & IndexedStack In Flutter

Stack Widget

Positioned Widget:

IndexedStack Widget

Conclusion

Leave a Comment Cancel Reply

Message Sent!