Flutter Layout Guide

Feb 11, 2021 20 min read
Flutter Layout Guide

Learn how layouts and widgets work in Flutter with this awesome practical guide.

Container

Container(
  color: Colors.cyanAccent,
  width: 80.0,
  height: 80.0,
 )

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.cyanAccent,
          width: 80.0,
          height: 80.0,
        ),
      ),
    );
  }
}

Row

MainAxisAlignment

Note: The below example is with CrossAxisAlignment.center
.center.start.end
.spaceEvenly.spaceAround.spaceBetween

CrossAxisAlignment

.center.start.end.stretch
		Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.cyanAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.blueAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.orangeAccent,
              width: 80.0,
              height: 80.0,
            ),
          ],
        )
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: LayoutGuide(),
    );
  }
}

class LayoutGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.cyanAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.blueAccent,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              color: Colors.orangeAccent,
              width: 80.0,
              height: 80.0,
            ),
          ],
        ),
      ),
    );
  }
}

Great! Next, complete checkout for full access to Codepur.
Welcome back! You've successfully signed in.
You've successfully subscribed to Codepur.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.