Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding

Today I’m sharing a demo app that I’ve built to show how to use the most common layouts in Flutter.

Full source code available here:

bizz84/layout-demo-flutter

You can run this project on your simulator or device.

Included in this demo (with links to the official Flutter docs):

Row / Column

• Row
• Column
• MainAxisAlignment
• MainAxisSize
• CrossAxisAlignment

Baseline

• Baseline
• CrossAxisAlignment

Stack

• Stack
• AlignmentDirectional

Expanded

• Expanded
• LayoutBuilder

Padding

• Expanded
• SizedBox

Not (yet) included

• Scrolling widgets, including ListView, GridView, PageView.

Have I missed anything? Let me know in the comments.

For more articles and video tutorials, check out Code With Andrea.

Read Next: Intro to Platform Channels: Building an Image Picker in Flutter.

I’m @biz84 on Twitter. You can also see my GitHub page. If you liked this article, send me some 👏👏👏. It motivates me to write more content and helps others discover it.