DEV Community

Matheus Paixão
Matheus Paixão

Posted on

Flutter - Difference between Container vs Column and Row

Today I will simply show the difference between Container vs Column and Row. Both sets are commonly used in interface development and it's wise to know the basic difference between them both.

Container - Flutter doc reference

Imagedescription

The container widget is the most used component in flutter apps because it provides you with various common painting, positioning, and sizing widgets, whenever you have widgets that are focus on it’s core functionality and don’t give you the option of positioning and styling, you involve it in a Container.

  • Accepts only one Widgets as child
  • Alignment is more flexible and the style options are more broad
  • Flexible Width, it can use the child width or whatever you set as width
  • Used when alignment and style is to be personalized

Column/Row

Image description

The row is the widget that can display various child widgets in a horizontal manner.
The column displays child widgets in a vertical manner.
By default, they do not support scrolling. It can be enabled by wrapping with other widgets. But, it is preferred to use ListView in case there are numerous child widgets to be displayed.

  • Accepts a list of Widgets as children
  • Limited alignment and no style options available.
  • Always fills the height (Column) and the Row always fills the width
  • Used when the Widgets are close to each other, follow a pattern or on top of each other

A great use of a Container and a Column/Row together, is when you want to personalize your Column and Row but you can’t. Then you involve your Widget in a Container so you can give better alignment and style it as you wish.

Thank you and let me know what you think bellow in the comments

mgpaixao image

Top comments (0)