Last Updated on 2021-03-16 by Clay
Introduction
There are various widget components in Flutter, such as Container, Center, Column, Row ... etc. Since I recently studied how to fit the multiple components together for placement, today I will first record how to use Column and Row to design your layout.
- Column: It is to place the components in a "vertical" appearance
- Row: It is to place the components in a "horizontal" appearance
The following is a demonstration with a simple code.
Container
Before we start, I want to introduce about "Container" component.
Container is a component that we can freely adjust the size and position relationship with the component.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
color: Colors.grey,
);
}
}
Output:
The above is a simplest code: we use Container to draw a widget fill all the screen, and set the color to grey.
And in the following chapter, I will use the Container component to demo.
Column
First, let's start with the Column layout.
Column, as just explained, arranges the components vertically. In here, we use four containers of different colors to show the arrangement method.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Color'),
),
body: _MyApp(),
),
);
}
}
class _MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
width: 50,
height: 50,
color: Colors.red,
),
Container(
width: 50,
height: 50,
color: Colors.blue,
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
),
Container(
width: 50,
height: 50,
color: Colors.green,
),
Container(
width: 10000,
height: 10,
color: Colors.black,
)
],
);
}
}
Output:
Since we have not set it, the components will be placed from the top, which are red, blue, yellow, and green Containers.
Of course, I added a layer of black Container as the bottom line below, which can make it easier for use to demonstration of crossAxisAlignment.
Here you can remember in advance:
mainAxisAlignment is the "vertical axis" of Column, with the following parameters:
| start | Place children at the beginning of the vertical axis |
| center | Place children in the center of the vertical axis |
| end | Place children at the end of the vertical axis |
| spaceAround | The distance between children on the vertical axis is equal, but the distance between the beginning and the end is only 1/2 |
| spaceEvenly | The distance between children on the vertical axis is equal, and the distance between the beginning and the end is also the same |
| spaceBetween | The distance between children on the vertical axis is equal, and children are close to the edge |
The method of use is as follows, and the following are analogous to:
Column(
mainAxisAlignment: MainAxisAligment.start,
children: <Widget>["Our Containers"],
);Output:
- center: Place children in the center of the vertical axis
And so on.
Of course, we can also adjust the crossAxisAlignment (the horizontal axis on the Column).
Here it should be noted that the horizontal axis will be the standard with the longest length of the component, that is if all components are the same size, we will not see the is why we need a black Container as the bottom component.
It has the following parameters:
| start | Place the component at the beginning of the horizontal axis (far left) |
| center | Place the component in the middle of the horizontal axis |
| end | Place the component at the end of the horizontal axis (far right) |
| stretch | Stretch the element to the same length as the bottom |
Column(
mainAxisAlignment: MainAxisAligment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>["Our Containers"],
);Output:
And so on again.
Row
After talking about Column, in fact, Row doesn't need to be mentioned, basically it is exactly the same as Column, except that the main axis is changed to the horizontal axis.
We don’t even need to change the code, just change Column to Row. Of course, the direction of the last black Container also needs to be changed, this time it has only a very high height.
Just like before, you can try it freely and find the best placement you feel.
References
- https://flutter.dev/docs/development/ui/layout
- https://www.geeksforgeeks.org/row-and-column-widgets-in-flutter-with-example/