Stack Widget

What is Stack Widget?

The Stack widget is to align the positions and size of its children relative to each other and edges of its box.

This class is useful in the following scenarios

  1. Overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.
  2. You can only animated positioned widget inside the stack. Check AnimatedPositioned topic for more information.
  3. You can only transition positioned widget inside the stack. Check PositionedTransition topic for more information.

Default Constructor

The default constructor to create a stack layout widget. By default, the non-positioned children of the stack are aligned by their top left corners.

Stack(
    alignment: // defaults to AlignmentDirectional.topStart,
    textDirection: // TextDirection,
    fit: // defaults to StackFit.loose,
    overflow: // defaults to Overflow.clip,
    children: // defaults to 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 textDirection parameter is to define which to resolve alignment.

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

The overflow parameter defines whether overflowing children should be clipped. Overflow.clip, children cannot paint outside of the stack's box.

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

Code snippet

This code snippet shows how to configure Stack widget.

Stack(
      alignment: AlignmentDirectional.topStart,
      textDirection: TextDirection.ltr,
      fit: StackFit.loose,
      overflow: Overflow.clip,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.blue[100],
        ),
        Container(
          width: 90,
          height: 90,
          color: Colors.blue[200],
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.blue[400],
        ),
      ],
    );

Demo Code

This example shows using a Stack you can position widgets over one another.

The sample creates a blue box with opacity 100 that overlaps a larger blue box opacity 200, which itself overlaps an even larger blue box opacity 400.

import 'package:flutter/material.dart';

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.topStart,
      textDirection: TextDirection.ltr,
      fit: StackFit.loose,
      overflow: Overflow.clip,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.blue[100],
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.blue[200],
        ),
        Container(
          width: 60,
          height: 60,
          color: Colors.blue[400],
        ),
      ],
    );
  }
}

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

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

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