Here is a Flutter layout cheat sheet that you can use as a reference:
Widgets for layout
- Container: A box that can contain other widgets and can be styled with a background color and padding.
- Row and Column: Lay out their children in a single horizontal or vertical line.
- Expanded: Takes up remaining free space in a Row or Column.
- Flexible: Takes up remaining free space in a Row or Column, but allows its child to be wrapped if there is not enough space.
- Stack: Overlays children on top of each other, with the most recently added child appearing on top.
- Card: A material design card.
- ListView: A scrollable list of widgets.
Widgets for positioning
- Positioned: Positions a child within a Stack relative to the top, right, bottom, or left edge.
- Align: Aligns a child within its parent widget.
- FractionallySizedBox: Scales a child to a fraction of its parent's size.
- AspectRatio: Scales a child to a specific aspect ratio.
- LayoutBuilder: Builds a widget tree that depends on the dimensions of its parent widget.
Widgets for styling
- Padding: Adds padding around a child widget.
- Theme: Applies a theme to descendant widgets.
- BoxDecoration: Applies a background color, border, or gradient to a widget.
- TextStyle: Applies style to text, such as font size, color, and font weight.
Widgets for input and interaction
- Button: A button that triggers an action when tapped.
- TextField: A text input field.
- Checkbox: A box that can be checked or unchecked.
- Radio: A radio button that can be selected or deselected.
- Switch: A toggle switch that can be turned on or off.
- Slider: A widget that allows the user to select a value by dragging a slider thumb.
I hope this cheat sheet helps you get started with layout in Flutter!
Thanks for reading.