Stack Flutter Widget Example

This article explains you how to use stack widget in flutter applications through example. We can put widgets on top of each other using stack widget.

Stack widget is useful when we want to overlay one widget on top of other. In this condition, We can not use row and column. We can display text over image using stack widget in flutter applications. There are many properties in stack widget.

Alignment property is used to align child widgets in stack widget. For example, we can display text over image at top-right or any direction using alignment property. clipBehaviour property is used to decide content will be clipped or not.

We can give available space to child widget to make it fit in stack widget using fit property. Using overflow property, we can decide whether overflow part of content will be visible or not. Using textDirection property, we can display text from left to right or right to left.

 

Stack Flutter Widget

Stack(
children: [
    Container(
        width: 350,
        height: 350,
        color: Colors.pinkAccent,
    ),
    Container(
        width: 300,
        height: 300,
        color: Colors.amberAccent,
    ),
    Container(
        height: 250,
        width: 250,
        color: Colors.deepOrangeAccent,
    ),
    Container(
        height: 200,
        width: 200,
        color: Colors.blueAccent,
    ),
],
),
 
stack flutter
 
 

Stack With Alignment

Stack(
children: [
    Container(
        width: 350,
        height: 350,
        color: Colors.pinkAccent,
        child: Text(“1”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30, color: Colors.white)),
        alignment: Alignment.bottomCenter,
    ),
    Container(
        width: 300,
        height: 300,
        color: Colors.amberAccent,
        child: Text(“2”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30, color: Colors.white)),
        alignment: Alignment.topRight,
        padding: EdgeInsets.only(right: 15),
    ),
    Container(
        height: 250,
        width: 250,
        color: Colors.deepOrangeAccent,
        child: Text(“3”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30, color: Colors.white)),
        alignment: Alignment.bottomLeft,
        padding: EdgeInsets.only(left: 15, bottom: 10),
    ),
    Container(
        height: 200,
        width: 200,
        color: Colors.blueAccent,
        child: Text(“4”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30, color: Colors.white)),
        alignment: Alignment.center,
    ),
],
),
 
stack flutter
 
 

Stack With Positioned Widget

Stack(
children: [
    Container(
        width: 300,
        height: 300,
        color: Colors.pinkAccent,
    ),
    Positioned(
        top: 20,
        left: 20,
        child: Container(
            height: 200,
            width: 200,
            color: Colors.amberAccent,
        ),
    ),
    Positioned(
        right: 60,
        top: 50,
        child: Container(
            width: 200,
            height: 200,
            color: Colors.deepOrangeAccent,
        ),
    ),
    Positioned(
        bottom: 20,
        left: 80,
        child: Container(
            height: 200,
            width: 200,
            color: Colors.blueAccent,
        ),
    ),

],
),

 
 

Leave a Reply