MOCKSTACKS
EN
Questions And Answers

More Tutorials









Flutter Multi Child Layout Widgets


Multi-Child Layout Widgets and they are used to determine what UI elements go where - where the elements of the user interface are going
to be presented. They are very important as you can break almost 90% of the layout designs into Rows and Columns.

Obviously, you can combine/nest these Widgets. You could have a Row that contains 2 Columns that contains 3 Custom Widgets. Then each Custom Widget could contain a Row of an Icon Widget, a Text Widget then a Button.

These layouts work really well when they are used to layout components to which you already know the size, such as buttons, textboxes etc. They also work when you have widgets that don’t overflow the screen space available and you expand them to use all the space available up. When you need to use up extra screen space you can use the MainAxisAlignment property to space child Widgets out or use Expanded Widgets to expand those child Widgets.

These layouts don’t work well when they are used to layout components with very dynamic sizing requirements, for example Text
widgets that are generated from user data, with some wide texts, some narrow texts. In this case, you are probably better off using the Table.

It can handle the text overflows without any additional complications. When using these Widgets, you may sometimes encounter the times
when the child Widgets don’t fit in the screen space.

Spacing Out Children Using MainAxisAlignment


The MainAxisAlignment widget allows you to determine how the Widgets are laid out vertically. Take a look at the example below to see
how this affects the horizontal layouts.

Example – ‘column_spaced_evenly’


Source Code


import 'package:flutter/material.dart';
void main() => runApp(new ColumnSpacedEvenly());
class ColumnSpacedEvenly extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new HomeWidget(),
);
}
}
class HomeWidget extends StatelessWidget {
HomeWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
RawMaterialButton redButton = RawMaterialButton(
constraints: const BoxConstraints(minWidth: 188.0, minHeight: 136.0),
onPressed: () {},
shape: new CircleBorder(),
elevation: 2.0,
fillColor: Colors.red,
padding: const EdgeInsets.all(15.0),
);
RawMaterialButton greenButton = new RawMaterialButton(
constraints: const BoxConstraints(minWidth: 188.0, minHeight: 136.0),
onPressed: () {},
shape: new CircleBorder(),
elevation: 2.0,
fillColor: Colors.green,
padding: const EdgeInsets.all(15.0),
);
RawMaterialButton blueButton = new RawMaterialButton(
constraints: const BoxConstraints(minWidth: 188.0, minHeight: 136.0),
onPressed: () {},
shape: new CircleBorder(),
elevation: 2.0,
fillColor: Colors.blue,
padding: const EdgeInsets.all(15.0),
);
return new Scaffold(
appBar: new AppBar(
title: new Text("Column"),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[redButton, greenButton, blueButton],
),
));
}



Conclusion

In this page (written and validated by ) you learned about Flutter Multi Child Layout Widgets . What's Next? If you are interested in completing Flutter tutorial, your next topic will be learning about: Flutter Single Child Layout Widgets.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.