Flutter styling cheat sheet

Creating a Flutter styling cheat sheet can be very helpful when building various types of UIs. Here's a comprehensive cheat sheet that includes essential properties and widgets you'll often use in Flutter to style and layout your application:

Basic Widgets for Layout

**Container**: For single child layout, supports padding, margins, borders, and more.
**Row**: Horizontal layout of children.
**Column**: Vertical layout of children.
**Stack**: Overlay widget, lets you stack widgets on top of each other.
**Padding**: Adds padding around a child widget.
**Center**: Centers its child widget.
**ListView**: For a scrollable list of widgets.
**GridView**: For a grid-like arrangement of widgets.

Text Styling

**Text**: The basic widget for showing text.
**TextStyle**: To style text elements. Attributes include:
- `color`
- `fontSize`
- `fontWeight`
- `fontStyle`
- `decoration` (like underline)

Colors and Decoration

**Color**: Define using `Colors.red` or Color(0xFFRRGGBB).
**BoxDecoration**: Use with Container for background color, borders, and shadows. Properties:
- `color`
- `border`
- `borderRadius`
- `boxShadow`
- `gradient`

Buttons and Icons

**ElevatedButton**: Button with elevation (shadow).
**FlatButton**: Now deprecated, replaced by TextButton.
**IconButton**: Button with an icon.
**Icon**: Displays icons, uses the material icons library.

Input and Forms

**TextField**: For input fields. Customize with `decoration` for labels, borders, etc.
**Form**: Wrap multiple form fields for validation.
**DropdownButton**: For selectable dropdown lists.

Spacing and Alignment

**SizedBox**: For fixed size spacing or to give dimensions to a widget.
**Expanded**: Expands a child of Row, Column, or Flex.
**Align**: Aligns its child within itself and optionally sizes itself based on the child's size.

Useful Utilities

**MediaQuery**: Get size, orientation, and other media-related properties.
**Theme**: Access theme data like colors and font styles from the MaterialApp theme.

Example Usage


Container(

  padding: EdgeInsets.all(8.0),

  color: Colors.blue,

  child: Text(

    'Hello, Flutter!',

    style: TextStyle(

      color: Colors.white,

      fontSize: 20,

      fontWeight: FontWeight.bold,

    ),

  ),

);

Row(

  mainAxisAlignment: MainAxisAlignment.spaceAround,

  children: <Widget>[

    Icon(Icons.share),

    ElevatedButton(

      onPressed: () {},

      child: Text('Share'),

    ),

    IconButton(

      icon: Icon(Icons.thumb_up),

      onPressed: () {},

    )

  ],

);

TextField(

  decoration: InputDecoration(

    labelText: 'Enter your username',

    border: OutlineInputBorder(),

  ),

);

This cheat sheet covers the basics and can be extended based on specific requirements and custom styling needs in your Flutter applications.