Flutter

Layout with Row, Column & Container

Row arranges its children left-to-right; Column arranges them top-to-bottom.

Example: three colored squares in a row

Widget build(BuildContext context) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Container(color: Colors.blue, width: 50, height: 50),
      Container(color: Colors.orange, width: 50, height: 50),
      Container(color: Colors.green, width: 50, height: 50),
    ],
  );
}

Renders three evenly-spaced colored squares (blue, orange, green) in a horizontal row.

Container wraps a single child to add padding, margin, size, or a background color, it's the Flutter equivalent of a styled <div> from CSS. mainAxisAlignment: MainAxisAlignment.spaceEvenly plays a nearly identical role to CSS flexbox's justify-content: space-evenly, if you've read the CSS tutorial's Flexbox lesson, this should feel like a direct parallel, not a new concept.

Widget build(BuildContext context) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Container(color: Colors.blue, width: 50, height: 50),
      Container(color: Colors.orange, width: 50, height: 50),
      Container(color: Colors.green, width: 50, height: 50),
    ],
  );
}

Renders three evenly-spaced colored squares (blue, orange, green) in a horizontal row.

← StatefulWidget & setState Handling User Input →