Layout cheat sheet for Flutter

This Article is posted by seven.srikanth at 1/7/2023 4:12:46 AM



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.
 

Tags: Flutter cheat sheet;








0 Comments
Login to comment.
Recent Comments












© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com