Flutter Stack vs Column Widget – What’s the Difference?

When to use Stack widget? And when to use Column Widget? What’s the major difference between  Stack and Column Flutter Widgets and how to use them accordingly? It’s important to realize that stack and column widgets are different hence it’s reasonable to study them in details to know how to use them for the purpose of using them efficiently.

In this post, we’ll go through Flutter Stack vs Column widgets in details with practical examples to understand the difference between them and learn how to use them when building Flutter apps.

Flutter Column

To begin with, a column is a frequently used widget that allows you to put one widget after another, arranging them vertically (opposite of a row). In other words, column is a linear layout with its children in vertical orientation.

In fact, there are variable properties which a column takes including:

• children[]:
  this property is a list of widgets to be displayed in the column layout.

  

• mainAxisAlignment:
  identifies how children appears in the main axis. It takes arguments such as start, end, center, spaceAround, spaceBetween, and spaceEvenly.
  For example, mainAxisAlignment: MainAxisAlignment.start  displays the widgets in the column beginning from the beginning of the row.
• crossAxisAlignmnet:
  identifies how children appears in the cross axis. it takes arguments such as start, center, baseline, end and stretch.
• verticalDirection:
  determines the vertical arrangement order of the column children. (i.e. from up to down and vice versa)
• mainAxisSize:
  determines whether to maximize or minimize the leftover space (free space) in the column.
• textDirection:
  determines in what order to lay the children of the column. (Note: if the main axis alignment is set to either start or end, text direction should be null as it will be ignored).

 

Example

Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Dania\'s Blog!',
style: TextStyle(fontSize: 40, color: Colors.redAccent.shade700),
),
Text(
'Welcome To My Coding Space',
style: TextStyle(fontSize: 20, color: Colors.black45),
),
],
),

Flutter Stack

Stack is another frequently used widget which allows you to, as its name suggests, stack or place widgets on top of each other. different from column, stack allows its children to overlap with each other in order to create more complex views. For example, place a text over an image or overlapping two images to create more complex designs. Furthermore, stack takes two types of children which are Positioned and non-positioned children. Positioned children are wrapped in the Positioned widget which is aligned using the properties top, left, bottom, and right (there must be at least one non-null property), whereas non-positioned children, such as Text widget, are by default aligned to top-left corner. Make sure to practice how to use Stack widget in a real app to understand it better and use it more efficiently in your apps.

 

In like manner, the main properties of Stack widget includes:

• children[]: 
  this property is a list of widgets to be displayed in the stack layout. As mentioned above, children can be positioned and non-positioned.
• alignment:
  specifies the way non-positioned children are aligned within the stack widget. he default value of alignment property is topLeft.
  For example,  you can set the property to Alignment.topLeft, Alignment.topRight, or Alignment.topCenter.  non-positioned children will be placed based on these alignment property.
• clipBehavior:
  determines whether the content is clipped or not.
• fit:
  specifies how the non-positioned children fit in the space available for it.
  For example, you can set the property to StackFit.loose, StackFit.expand, or StackFit.passthrough
      loose: the child widget size is set to its original size.
      expand: the child widget size is set to cover as much space as possible.
      passthrough: child widget size is set in a relative position as its parent position.
• textDirection:
  determines text direction to be rtl or ltr.
  (Note: if the alignment is set to any other value, text direction should be null as it will be ignored).

Example

Stack(
  alignment: Alignment.bottomCenter,
  fit: StackFit.loose ,
  children: [
    Positioned(
        top: 100,
        left: 40,
        width: 250,
        height: 250,
        child: Container(
          decoration: BoxDecoration(                  
            color: Colors.red,
            borderRadius: BorderRadius.circular(20),
            border: Border.all(width: 5, color: Colors.black),

          ),
    )),
    Positioned(
        top: 140,
        left: 80,
        width: 250,
        height: 250,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.amber,
            borderRadius: BorderRadius.circular(20),
            border: Border.all(width: 5, color: Colors.black),
          ),
        ),
    ),
    Positioned(
        top: 320,
        left: 140,
        width: 140,
        height: 100,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.cyan,
            borderRadius: BorderRadius.circular(20),
            border: Border.all(width: 5, color: Colors.black),
          ),
          child: Center(
            child: Text('Dania\'s Blog',
            style: TextStyle(fontSize: 15, color: Colors.black54, decoration: TextDecoration.none)),
          )
        )),
    Container(child: Text('daniasblog.com', style: TextStyle(fontSize: 20,color: Colors.black, decoration: TextDecoration.none),), ), //non-positioned child
  ],
)

Conclusion

Now you know the difference between stack and column and how to use them to create different layouts based on your desire. Given these points, don’t forget to practice both of them to understand them better and become comfortable using them in your apps.

 

Ready to learn more? Read my latest posts related to Flutter development.