Flutter Layout Cheat Sheet 2023
3 min readDec 25, 2022
Flutter provides a wide range of layout widgets that can be used to create complex and responsive UI designs. Here is a cheat sheet of some of the most commonly used layout widgets in Flutter:
Container
: A box that can contain other widgets and can be decorated with a background color, a border, and padding. TheContainer
widget is a flexible and versatile layout widget that can be used to create a wide range of UI designs. It can be used to create a single element or a complex layout, and can be customized with various options such as background color, border, and padding.Row
andColumn
: Layout widgets that arrange their children in a horizontal or vertical line. TheRow
andColumn
widgets are fundamental layout widgets that are used to create simple linear layouts. They can be used to arrange their children in a single row or column, and can be customized with various options such as spacing, alignment, and flex values.Expanded
: A widget that takes up remaining free space in aRow
orColumn
. TheExpanded
widget is used to take up remaining free space in aRow
orColumn
. It can be used to create flexible layouts that adjust to the available space, and can be customized with a flex value to specify the relative size of the widget compared to its siblings.Stack
: A widget that overlays its children on top of each other. TheStack
widget is a layout widget that allows its children to be overlaid on top of each other, with the most recently added child appearing on top. It can be used to create complex layouts with overlapping elements, and can be customized with various options such as positioning and alignment.Card
: A material design card that can contain text, images, and other UI elements. TheCard
widget is a material design component that can be used to display content in a card-like format. It can contain text, images, and other UI elements, and can be customized with various options such as background color, elevation, and corner radius.ListView
: A scrollable list of widgets. TheListView
widget is a scrolling container that displays a list of widgets. It can be used to display a large number of items efficiently, and can be customized with various options such as scroll direction, separators, and item decoration.GridView
: A scrollable grid of widgets. TheGridView
widget is a scrolling container that displays a grid of widgets. It can be used to display a large number of items efficiently, and can be customized with various options such as scroll direction, number of rows and columns, and item decoration.Flow
: A flow-based layout that wraps its children in a horizontal or vertical line. TheFlow
widget is a flow-based layout that wraps its children in a horizontal or vertical line and adjusts the size of the children to fill the available space. It can be used to create flexible layouts that adjust to the available space, and can be customized with various options such as alignment