Flutter Beautiful Column and Row
Hello everyone. I want to write something about Column and Row widgets in beautiful Flutter.
You can check this link for a quick start.
Column Widget
Column is a widget that displays its children in a vertical array. You can add any widget to it.
Properties
MainAxisAlignment: This prop. is provide to organise our widgets in Column widget.
- MainAxisAlignment.center These widgets locate center of Column widget properly.
- MainAxisAlignment.start These widgets start from top of our device screen.
- MainAxisAlignment.spaceBetween
One widget, Spacer widget, one widget. We should think like that.
- MainAxisAlignment.spaceAround
Place the free space evenly between the children as well as half of that space before and after the first and last child.
- MainAxisAlignment.spaceEvenly
Place the free space evenly between the children as well as before and after the first and last child.
- MainAxisAlignment.end
Place the children as close to the end of the main axis as possible.
Main Axis Size
During a flex layout, available space along the main axis is allocated to children. After allocating space, there might be some remaining free space. This value controls whether to maximize or minimize the amount of free space, subject to the incoming layout constraints.
- MainAxisSize.min
Minimize the amount of free space along the main axis, subject to the incoming layout constraints.
- MainAxisSize.max
Maximize the amount of free space along the main axis, subject to the incoming layout constraints.
Vertical Direction
A direction in which boxes flow vertically.
- VerticalDirection.down
Boxes should start at the top and be stacked vertically towards the bottom.
- VerticalDirection.up
Boxes should start at the bottom and be stacked vertically towards the top.
Row Widget
Creates a horizontal array of children.
Properties
Main Axis Alignment: This prop. is provide to organise our widgets in Row widget.
- MainAxisAlignment.center
Place the children as close to the middle of the main axis as possible.
- MainAxisAlignment.start
Place the children as close to the start of the main axis as possible.
- MainAxisAlignment.spaceBetween
Place the free space evenly between the children.
- MainAxisAlignment.spaceAround
Place the free space evenly between the children as well as half of that space before and after the first and last child.
- MainAxisAlignment.spaceEvenly
Place the free space evenly between the children as well as before and after the first and last child.
- MainAxisAlignment.end
Place the children as close to the end of the main axis as possible.
Main Axis Size
- MainAxisSize.min
Minimize the amount of free space along the main axis, subject to the incoming layout constraints.
- MainAxisSize.max
Maximize the amount of free space along the main axis, subject to the incoming layout constraints.
You can my Instagram page for more information about beautiful Flutter widgets.
Everything is widget..
