Flutter Layouts

6. Flutter Layouts

Layouts play a crucial role in Flutter app development, as they determine how widgets are arranged on the screen. Flutter provides a variety of layout widgets that help you create beautiful and responsive user interfaces. In this tutorial, we'll explore different Flutter layout widgets and demonstrate how to use them to create various UI designs.

Common Layout Widgets:

1. Container Widget

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(8.0),
  color: Colors.blue,
  child: Text('This is a Container'),
)

2. Column and Row Widgets

The 'Column' and 'Row' widgets allow you to arrange children widgets vertically or horizontally, respectively.

Example: Column Widget

Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Row(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

3. ListView Widget

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

4. Stack Widget

Stack(
  children: [
    Container(color: Colors.blue),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Top Left'),
    ),
  ],
)

5. Expanded Widget

Row(
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.green)),
    Expanded(child: Container(color: Colors.blue)),
  ],
)

Complex Layouts:

Now, let's create a couple of more complex layouts:

1. Card Layout

Card(
  child: Column(
    children: [
      Image.asset('assets/image.png'),
      ListTile(
        title: Text('Card Title'),
        subtitle: Text('Card Subtitle'),
      ),
      ButtonBar(
        children: [
          TextButton(
            onPressed: () {},
            child: Text('Button 1'),
          ),
          TextButton(
            onPressed: () {},
            child: Text('Button 2'),
          ),
        ],
      ),
    ],
  ),
)

2. Grid Layout

GridView.count(
  crossAxisCount: 2,
  children: List.generate(4, (index) {
    return Container(
      color: Colors.teal,
      margin: EdgeInsets.all(8.0),
      child: Center(
        child: Text('Item $index'),
      ),
    );
  }),
)

Responsive Layouts:

To create responsive layouts in Flutter, you can use media queries, orientation detection, or layout builder. These techniques allow your app to adapt to different screen sizes and orientations.

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      // Use a wide layout for larger screens
      return WideLayout();
    } else {
      // Use a narrow layout for smaller screens
      return NarrowLayout();
    }
  },
)

Conclusion:

Flutter offers a wide range of layout widgets to help you create versatile and responsive user interfaces. By combining these widgets and using responsive layout techniques, you can design appealing and adaptive layouts for your Flutter apps.