Stack in Flutter

199

Stack widget positioned its children relatives to the edges of it’s box. Stack widget allows us to make a layer of widgets by putting them on top of each other. Sometimes we need to overlap the widget on the top of another widget. At that time, stack widget is appropriate to use in our application. The stack widget has two types of child one is positioned widget and another is non-positioned widget.

In this tutorial, we will discuss about stack widget in flutter. Here we will discuss with example.

Constructor of Stack

Stack(
{Key key,
AlignmentGeometry alignment: AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit fit: StackFit.loose,
Overflow overflow: Overflow.clip,
Clip clipBehavior: Clip.hardEdge,
List<Widget> children: const <Widget>[]}
)

Basic Syntax

  Stack(
children: [
            //widget
            //widget
          ],)

Code Implementation

Stack(
        children: [
          Center(
            child: Container(
              height: 200.0,
              width: 200.0,
              color: Colors.green,
            ),
          ),

          Container(
            height: 400,
            width: 400,
            color: Colors.red,
          ),
          Container(
            height: 200.0,
            width: 200,
            color: Colors.yellow,
          ),
        ],
      ),


Positioned stack widget

Stack(
        children: [
          Center(
            child: Container(
              height: 200.0,
              width: 200.0,
              color: Colors.green,
            ),
          ),
          Positioned(
              right: 300,
              height: 150,
              width: 150,
              child: Container(
                color: Colors.pink,
                child: const Icon(
                  Icons.home,
                  color: Colors.white,
                  size: 26,
                ),
              )),
          const Positioned(
              bottom: 20,
              left: 300.0,
              height: 150,
              width: 150,
              child: Card(
                elevation: 5.0,
                child: Center(
                    child: Text(
                  "Text`",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                      fontWeight: FontWeight.w600),
                )),
                color: Colors.amber,
              )),
          const Positioned(
              right: 10.0,
              child: Card(
                  child: Padding(
                padding: EdgeInsets.all(12.0),
                child: Text("Right"),
              )))
         
        ],
      ),
    

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/Stack

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.