Flutter Layout Cheat Sheet 2023

Raushan Jha
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:

  1. Container: A box that can contain other widgets and can be decorated with a background color, a border, and padding. The Container 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.
  2. Row and Column: Layout widgets that arrange their children in a horizontal or vertical line. The Row and Column 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.
  3. Expanded: A widget that takes up remaining free space in a Row or Column. The Expanded widget is used to take up remaining free space in a Row or Column. 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.
  4. Stack: A widget that overlays its children on top of each other. The Stack 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.
  5. Card: A material design card that can contain text, images, and other UI elements. The Card 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.
  6. ListView: A scrollable list of widgets. The ListView 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.
  7. GridView: A scrollable grid of widgets. The GridView 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.
  8. Flow: A flow-based layout that wraps its children in a horizontal or vertical line. The Flow 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

--

--

Raushan Jha
Raushan Jha

Written by Raushan Jha

MOBILITY COE HEAD at Think AI Labs LLC.I love to teach the ways of Android & iOS through either java or Flutter.

No responses yet