README.md

Flex Layout

Flex

A widget that displays its children in a one-dimensional array.

• The Flex widget does not scroll. If you have some widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.
• The Flex widget does not allow its children to wrap across multiple horizontal or vertical runs. For a widget that allows its children to wrap, consider using the Wrap widget instead of Flex.
• If you only have one child, then rather than using Flex, Row, or Column, consider using Align or Center to position the child.
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

import 'package:flutter/material.dart';

class ExFlex extends StatelessWidget {
  const ExFlex({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      height: 150,
      child: Flex(
        direction: Axis.horizontal,
        children: [
          Container(
            width: 100,
            height: 50,
            color: Colors.lime,
          ),
          Container(
            width: 100,
            height: 10,
            color: Colors.purple,
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.orangeAccent,
          ),
        ],
      ),
    );
  }
}

Row

The Row widget takes a list of widgets and arranges them horizontally. You will likely use this widget a lot when making layouts in your code.

Row(
  children: [
    ElevatedButton(
      child: const Text('Widget 1'),
      onPressed: () => Navigator.pushNamed(context, '/second'),
    ),
    ElevatedButton(
      child: const Text('Widget 2'),
      onPressed: () => Navigator.pushNamed(context, '/third'),
    ),
    ElevatedButton(
      child: const Text('Widget 3'),
      onPressed: () => Navigator.pushNamed(context, '/fourth'),
    ),
  ],
);

Column

The Column widget allows you to arrange a list of widgets vertically, similar to how the Row widget aligns them horizontally.

Column(
  children: [
    ElevatedButton(
      child: const Text('Widget 1'),
      onPressed: () => Navigator.pushNamed(context, '/second'),
    ),
    ElevatedButton(
      child: const Text('Widget 2'),
      onPressed: () => Navigator.pushNamed(context, '/third'),
    ),
    ElevatedButton(
      child: const Text('Widget 3'),
      onPressed: () => Navigator.pushNamed(context, '/fourth'),
    ),
  ],
);

Expanded

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.

An Expanded widget must be a descendant of a Row, Column, or Flex, and the path from the Expanded widget to its enclosing Row, Column, or Flex must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).

Row(
  children: <Widget>[
    Container(
      color: Colors.blue,
      height: 100,
      width: 50,
    ),
    Expanded(
      child: Container(
        color: Colors.amber,
        height: 100,
      ),
    ),
    Container(
      color: Colors.green,
      height: 100,
      width: 50,
    ),
  ],
)

Tips

If you do not need a child, use Spacer.

References

• A Complete Guide to Flexbox