Fundamental Flutter Widgets — Part 1

Hello, good people! Hope you’re having a wonderful day! Today I’m writing about the fundamental widgets that every flutter developer should know and their use cases. Here’s a list of the widgets I’m writing about:

1. Container
2. Row
3. Column
4. Expanded
5. Padding
6. SizedBox
7. AspectRatio

The post is going to be pretty long. So let’s get started!

1. Container

What is it?

Just as the name suggests this widget contains another child widget. The child widget is confined to the area defined by the container. If no height and width value is provided then the container widget will expand to give enough space to the child widget. The documentation says the following:

A convenience widget that combines common painting, positioning, and sizing widgets.

A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null). The container is then surrounded by additional empty space described from the margin.

What are the important parameters?

1. Height and width
2. Decoration: A way to decorate the container using BoxDecoration.
3. Alignment: Align the child widget inside the container.
4. Padding and Margin

When to use?

A container is a versatile widget. The common usage includes

1. Separating out widgets from each other.
2. Adding decoration to widgets.
3. Adding size constraints to widgets.
4. Adding margin and padding.
5. Aligning child widget.

Pro tip: Use a Container when you need to do multiple of the above mentioned things. For doing just one consider other widgets. Using a widget that was built for a specific purpose, will make the code more READABLE. Say, you have to add only padding to a widget. You can do so using both Container and Padding widget. Use padding because it will make your intent more clear to the reader of the code.

2. Row

What is it?

A row is used to stack children widgets horizontally.

What are its properties?

1. Takes multiple child widgets
2. Fills the available horizontal space
3. Is NOT scroll-able by default.

What are the important parameters?

1. MainAxisAlignment: Determine how the children are placed in the main axis. For row, the main axis is the X axis or horizontal axis.
2. CrossAxisAlignment: Determine where the children are placed in the cross axis. For row, the cross axis is the Y axis or vertical axis.
3. MainAxisSize: The exact size of the row widget where the children are to be placed.

When to use?

To stack widgets horizontally.

Common errors and fixes

1. Row is NOT by default scroll-able. So, if your children don’t fit within the screen size you’ll get a render overflow error. Use ListView with horizontal scrolling to make a scroll-able row like widget.
2. Row take all the available horizontal space. If you have other widgets you want to place beside a row, wrap the row in a container or specify the main axis size of the row.

3. Column

What is it?

A widget that stacks children widgets vertically. This is, like row, also a multi child widget. Meaning, it takes a list of widgets as children.

What are the important parameters?

1. MainAxisAlignment: The main axis of a column is the Y axis. This property determines how children widgets are placed in the main axis.
2. CrossAxisAlignment: The cross axis for column widget is the X axis. This property determines how children widgets are placed in the cross axis.
3. MainAxisSize: The exact size of the column widget where the children are to be placed.

When to use?

To stack widgets vertically.

Common errors

1. Column is NOT by default scroll-able. So, if your children don’t fit within the screen size you’ll get a render overflow error. Use ListView with vertical scrolling instead to make a scroll-able column like widget.
2. Column take all the available vertical space. If you have other widgets you want to place around a column, wrap the column in a container or specify the main axis size of the column.

4. Expanded

What is it?

An expanded widget is used to impose flex. Flex means how much free space a widget is allowed to take. According to the official documentation:

Widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Let me give an example to clear this up. Say we have 50 pixels of space. We have 3 widget that all take 10 pixels of minimum space. So, we’re left with 20 pixels of free space. The flex value of each of the 3 widgets will determine how this 20 pixel will be distributed to the 3 widgets. Say the widgets have a flex value of 1, 2 and 3. So, the space distribution between the widgets will be 1:2:3. So, widget 3 will get (3 * 20) / 6 = 10 pixels of free space. Widget 2 will get (2 * 20) / 6 = 6.33 pixel of free space. Widget 1 will get the remaining free space.

What should I know about it?

Flex property and space distribution based on flex value. It should be noted that Expanded is usually used for child widgets in column or row.

When to use it?

Hard coding the height and width is very bad practice. Because it doesn’t transfer well from device to device. So, expanded widgets should be used to specify dimensions of widgets. This way, the widgets are guaranteed to have proper ratio of sizes in any device.

Common errors

It’s common to be faced with render overflow error. Because the amount of space provided to a widget is insufficient for the widget. Then the widget isn’t rendered properly and will cause the error.

5. Padding

What is it?

A widget used to add padding around any widget. This is a single child weight.

What should I know about it?

Padding values are set using EdgeInsets class. There are many ways to set the values like all(), only(), symmetric(), fromLRTB() etc.

When to use it?

Use it instead of container, when you only need to add padding to more than one side of a widget.

6. SizedBox

What is it?

Exactly as the name suggests it’s a box that’s a specific size.

What should I know about it?

Height and width property.

When to use it?

1. Useful to create a specific size container like enclosing to place widgets. Use it instead of container when only this is your goal.
2. Useful for providing proper spacing between widgets in a row or column when necessary.

7. AspectRatio

What is it?

A widget used to express width and height of a widget as a ratio of one another.

What should I know about it?

Aspect ratio value and how it sizes the widget. Aspect ratio = width / height. It’s good practice to write code just like the division here. Even though at the end of the day it’ll be a simple double value. But this makes the intent clear and easy to understand.

When to use it?

When unsure about the actual width and height of a widget. Using aspect ratio ensures that the widget looks exactly same when it is scaled up or down. The proportions of the widget will be intact.

That’s all for today. Hope this article helped. Be safe and happy coding!

Support me by

1. Applauding and sharing this article.
2. Following me in GitHub and Medium.

Thanks for reading! Hope you have a great day. Happy coding!