The following is Flutter layout code snippets for Layout with columns and row widget with the output seen so that it's easy to understand what's actually happening……..
The following base code is going to be our playground to understand the basic layouts in flutter.
import 'package:flutter/material.dart';
void main() {
runApp(Apptn());
}
class Apptn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.lightGreenAccent,
body: SafeArea(
child: Row(
children: [
Container(height: 100.0, width: 100.0, color: Colors.black87),
Container(height: 100.0, width: 100.0, color: Colors.red),
],
),
),
),
);
}
}Row and Column are widgets that can have children. Unlike Container that can be used to layout only one widget.
The code above with row and column widget will give the outputs as shown respectively.(and everything we are gonna talk about ,apply to column and row )
If we want to change the direction of boxes being stacked in the column, we can use VerticalDirection up and down. ( btw VerticalDirection up is the default one)
body: SafeArea(
child: Column(
verticalDirection: VerticalDirection.down,
children: [
Container(height: 100.0, width: 100.0, color: Colors.black87),
Container(height: 100.0, width: 100.0, color: Colors.red),
],
),
),The code above with VerticalDirection up and down will give the outputs as shown respectively
The same verticalDirection up and down can be used with rows too.(as said all apply to both row and column)
There is something called mainAxisAlignment.(what we mean by the main axis is the first blue line you can see in the above screenshot. Like the left of the whole screen). By default, it will be set to MainAxisAlignment.start, which places children as close as possible.
Setting MainAxisAlignment to spaceEvenly and center will give us the following screen respectively.
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(height: 100.0, width: 100.0, color: Colors.black87),
Container(height: 100.0, width: 100.0, color: Colors.red),
],
),
),
There are many things to do referring the main axis . Like using mainAxisAlignment: MainAxisAlignment.spaceAround vs mainAxisAlignment: MainAxisAlignment.spaceBetween ,can be seen in image respectively
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(height: 100.0, width: 100.0, color: Colors.black87),
Container(height: 100.0, width: 100.0, color: Colors.red),
Container(height: 100.0, width: 100.0, color: Colors.blueAccent),
Container(height: 100.0, width: 100.0, color: Colors.yellow),
],
),
)
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
As we can see, in all the screenshots the column/row is trying to take the entire vertical /horizontal space as it can(the light blue highlighted space).
If we want to minimize that, we have to set mainAxisSize to minimum like below.
body: SafeArea(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(height: 100.0, width: 100.0, color: Colors.black87),
Container(height: 100.0, width: 100.0, color: Colors.red),
],
),
),// below image shows screen after setting MainAxisSize.min to row and column widget respectively
if i want a specific amount of space between the red and black children,we can use a SizedBox class. As we are using Row which is aligned horizontally, we specify the width
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
There exists a “CrossAxisAlignment” too that Places the children along the cross axis such that their baselines match( CrossAxisAlignment is set to center by default) . Let's compare MainAxisAlignment and CrossAxisAlignment
- without the default CrossAxisAlignment
body: Center(
child: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(height: 100.0, width: 100.0, color: Colors.black87),
Container(height: 100, width: 100.0, color: Colors.red),
Container(
height: 100.0, width: 100.0, color: Colors.blueAccent),
Container(height: 100.0, width: 100.0, color: Colors.yellow),
],
),
),
),2. Setting CrossAxisAlignment to start
body: Center(
child: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(height: 100.0, width: 100.0, color: Colors.black87),
Container(height: 100, width: 100.0, color: Colors.red),
Container(
height: 100.0, width: 100.0, color: Colors.blueAccent),
Container(height: 100.0, width: 100.0, color: Colors.yellow),
],
),
),
),output of 1 and 2 is shown respectively
as we can see nothing actually happened :(.So why is there a crossAxisAlignment when it's actually doing nothing!. The thing is it didn't do anything because the boxes we used were of the same size. Yes, it matters. Let's try changing it.
Container(height: 150.0, width: 120.0, color: Colors.black87),
Container(height: 130, width: 100.0, color: Colors.red),
Container(height: 100.0, width: 80.0, color: Colors.blueAccent),
Container(height: 35.0, width: 50.0, color: Colors.yellow),Lets do 1 and 2 with these changed box sizes.
the default CrossAxisAlignment and the CrossAxisAlignment :start will give screen as following
Now we can see a difference.!!!.there are many things u can do with this like setting CrossAxisAlignment to start, end, center, stretch ….. etc. Let's try doing two of them.
//1
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,and
//2
mainAxisAlignment: MainAxisAlignment.spaceStrech,
crossAxisAlignment: CrossAxisAlignment.end,
Setting the width to double.infinity in a container will allow the container to take as much as space available on the screen. As you can change the height,u can play around with it.
