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

In this video I show a demo app that I've made to explain how to build layouts in Flutter.

Row / Column

• Row
• Column
• MainAxisAlignment
• MainAxisSize
• CrossAxisAlignment

Baseline

• Baseline

Stack

• Stack
• AlignmentDirectional

Expanded

Wikipedia: Golden Spiral (also: Fibonacci, Golden Ratio).

• Expanded
• LayoutBuilder

Padding

• Expanded
• SizedBox

NOT COVERED in this video:

• Scaffold and all its properties (AppBar, FloatingActionButton, Drawer, BottomNavigationBar)
• Scrollable widgets, including ListView, GridView, PageView.

Note: I'm using the iOS simulator, but you can open the Android emulator and run the same code.

This code was written with Flutter Beta 0.4.4, and is tested to work with Dart 2.

sponsor

Code with Andrea is free for everyone. Help me keep it that way by checking out this sponsor:

Level up your Flutter app’s performance. Get full visibility into your Flutter app’s performance, including crashes, exceptions in Dart, network health, custom traces, and more. Solve your trickiest issues, optimize user journeys, and wow your end users - again and again.

Source Code

• Super Useful Flutter Layouts - Right in Your Pocket

Thanks for watching!