Layout cheat sheet for Flutter

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



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


Tags: Flutter cheat sheet;








0 Comments
Login to comment.
Recent Comments