How to implement Stack Widget in Flutter?

· 4 min read
How to implement Stack Widget in Flutter?
How to implement Stack Widget in Flutter?

A stack widget is a built-in widget in flutter SDK. So, in this article, we will see how to implement Stack Widget in Flutter.

How to implement Stack Widget in Flutter?

This widget allows us to make a layer of widgets. This is done by putting them on top of each other. Many times a simple row and column layout are not enough. We need a way to overlay one widget on top of the other. For example, we might want to show some text over an image, so to tackle such a situation we have a Stack widget.

The Stack widget has two types of children. One is positioned which is wrapped in the Positioned widget. And the other one is non–positioned which is not wrapped in the Positionedwidget. The alignment property is set to the top-left corner for all the non-positioned widgets. The positioned child widgets are positioned through the top, right, left, and bottom properties. We can use the key property of the Stack widget to change that order or to assign a different order.

Properties of Stack Widget:

  • alignment: This property takes a parameter of Alignment Geometry. Also, it controls how a child widget which is non-positioned or partially positioned will be aligned in the Stack.
  • clipBehaviour: This property will decide whether the content will be clipped or not.
  • fit: So, this property decides how the non-positioned children in the Stack will fill the space available to it.
  • overflow: This property controls whether the overflow part of the content will be visible or not,
  • textDirection: So, with this property, you can choose the text direction from right to left. or left to right.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Agency'),
        backgroundColor: Colors.redAccent[400],
      ), //AppBar
      body: Center(
        child: SizedBox(
          width: 300,
          height: 300,
          child: Center(
            child: Stack(
              children: <Widget>[
                Container(
                  width: 300,
                  height: 300,
                  color: Colors.blue,
                ), //Container
                Container(
                  width: 250,
                  height: 250,
                  color: Colors.brown,
                ), //Container
                Container(
                  height: 200,
                  width: 200,
                  color: Colors.yellow,
                ), //Container
                ], //<Widget>[]
              ), //Stack
            ), //Center
          ), //SizedBox
        ) //Center
      ) //Scaffold
    ) //MaterilApp
  );
}

Output:

Stack Widget

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to implement Stack Widget in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget GuideFlutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply