Flutter styling cheat sheet

By | 4 months ago

flutterdartstylingUIstylelayout

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.