Layout Cheat Sheet Flutter

Do you want layout a flutter?

Table of Contents

• Row and Column
• IntrinsicWidth and IntrinsicHeight
• Stack
• Expanded
• ConstrainedBox
• Align
• Container
  decoration: BoxDecoration
  • image: DecorationImage
  • border: Border
  • borderRadius: BorderRadius
  • shape: BoxShape
  • boxShadow: List<BoxShadow>
  • gradient: RadialGradient
  • backgroundBlendMode: BlendMode
• Material
  • shape: BeveledRectangleBorder
• Slivers
  • SliverFillRemaining
• SizedBox
• SafeArea

Row and Column

MainAxisAlignment

CrossAxisAlignment

Stack

Perfect for overlaying Widgets on top of each other

Stack(

children: <Widget>[

Container( width: 100, height: 100, color: Colors.red, ),

Container( width: 90, height: 90, color: Colors.green, ),

Container( width: 80, height: 80, color: Colors.blue, ),

], )

Expanded

Expanded works with Flex\Flexbox layout and is great for distributing space between multiple items.

Expanded widget in flutter comes in handy when we want a child widget or children widgets to take all the available space along the main-axis (for Row the main axis is horizontal & vertical for Column). Expanded widget can be taken as the child of Row, Column, and Flex.

ConstrainedBox

By default, most of the widgets will use as little space as possible:

SafeArea

n different platforms, there are special areas like Status Bar on Android or the Notch on iPhone X that we might avoid drawing under.

The solution to this problem is SafeArea widget (example without/with SafeArea)

In case you have a question that is important to you and don’t want me to miss it, you can send me.