Flutter Layout Cheat Sheet

Containers

Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  child: // Your child widget
)

Note: Containers are versatile and can be styled with various properties like padding, margin, decoration, etc.

Rows and Columns

Row

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    // Your children widgets
  ],
)

Column

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // Your children widgets
  ],
)

Expanded

Row(
  children: [
    Expanded(
      child: // Your child widget
    ),
    // Other widgets
  ],
)

Note: Expanded widget takes up remaining space along the main axis.

SizedBox

SizedBox(
  width: 20.0,
  height: 20.0,
  child: // Your child widget
)

Note: SizedBox enforces specific dimensions on its child.

ListView

Vertical ListView

ListView(
  children: [
    // Your list items
  ],
)

Horizontal ListView

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    // Your list items
  ],
)

GridView

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 8.0,
  ),
  itemBuilder: (BuildContext context, int index) {
    return // Your grid item widget;
  },
  itemCount: // Number of items,
)

Note: Customize crossAxisCount based on your layout.

Stack

Stack(
  children: [
    // Positioned widgets for precise placement
    // Your child widgets
  ],
)

Note: Stack allows you to overlay widgets.

Flex

Flex(
  direction: Axis.horizontal,
  children: [
    // Your flex items
  ],
)

Note: Flex is similar to Row/Column but provides more flexibility.

Card

Card(
  elevation: 4.0,
  child: // Your content
)

Positioned

Positioned(
  top: 10.0,
  left: 10.0,
  child: // Your child widget
)

Note: Used within a Stack for precise widget positioning.

MediaQuery

MediaQuery.of(context).size.width
MediaQuery.of(context).size.height

Aspect Ratio

AspectRatio(
  aspectRatio: 16 / 9,
  child: // Your child widget
)

Note: Ensures a specific aspect ratio for its child.

This cheat sheet covers fundamental Flutter layout widgets. For more detailed information and advanced layout scenarios, refer to the official Flutter documentation. Customize these widgets based on your specific UI requirements.