Flutter Layouts

Flutter provides a robust set of widgets that enable developers to create beautiful and responsive user interfaces. One of the key aspects of building a well-designed UI is creating a well-structured layout. In this article, we will explore various layout widgets provided by Flutter that enable developers to build professional-looking and responsive user interfaces.

Syntax

Here is the syntax of using a basic Container widget:

Container(
  child: childWidget,
  width: double.infinity, // width of the container
  height: 200, // height of the container
  alignment: Alignment.center, // alignment of the container's child widget
  padding: EdgeInsets.all(20), // padding of the container
  margin: EdgeInsets.only(bottom: 20), // margin of the container
  decoration: BoxDecoration(
    color: Colors.blue, // background color
    borderRadius: BorderRadius.circular(10), // border radius of the container
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        offset: Offset(0.0, 1.0), //(x,y)
        blurRadius: 6.0,
      ),
    ],
  ),
);

Example

Here's an example of creating a layout using Column and Expanded widgets, which are used to divide the available space into multiple fractions:

Column(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
        child: Center(
          child: Text(
            "First",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        child: Center(
          child: Text(
            "Second",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
        child: Center(
          child: Text(
            "Third",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    ),
  ],
);

Output

Here's the output of the above code:

Explanation

In the above example, we created a Column widget that contains three Expanded widgets. Each Expanded widget contains a Container widget that has a unique color and displays some text using a Text widget.

The Expanded widget is used to allocate the available space evenly among the children. Here, we used three Expanded widgets, so the available space was divided into three equal parts.

Use

Flutter provides a variety of layout widgets to help you build beautiful, responsive user interfaces. Some of the most commonly used layout widgets are:

• Container: A convenience widget that combines common painting, positioning, and sizing widgets.
• Column: A widget that displays its children in a vertical manner.
• Row: A widget that displays its children in a horizontal manner.
• Expanded: A widget that expands to fill the available space.
• Stack: A widget that positions its children relative to the edges of its box.
• Flex: A widget that displays its children in a flexible manner.

Important Points

• Always use the appropriate layout widget to match the design requirements.
• Consider using the Expanded widget to divide the available space among the children.
• Use paddings and margins judiciously to create a pleasing design.

Summary

Flutter provides a rich set of layout widgets that enable developers to build beautiful and responsive user interfaces. You can use various layout widgets, such as Container, Column, Row, Expanded, Stack, and Flex, to create complex UI designs, and use padding and margin properties to fine-tune the appearance of the UI.