MainAxisAlignment and CrossAxisAlignment in Flutter - Mini App: Build & Ship

Build: Alignment Demo Screen

This screen shows three colored boxes arranged in a row. The boxes are aligned using MainAxisAlignment and CrossAxisAlignment properties to demonstrate how they affect layout.

Target UI

---------------------------------
| Alignment Demo Screen          |
|-------------------------------|
| [ Red ] [ Green ] [ Blue ]    |
|                               |
|                               |
|                               |
---------------------------------

Use a Row widget to arrange three Containers horizontally.

Set MainAxisAlignment to spaceEvenly to spread boxes evenly across the row.

Set CrossAxisAlignment to center to vertically center the boxes.

Each box should be a square of 80x80 pixels with colors red, green, and blue.

Add a title text at the top with the screen name.

Starter Code

Flutter

import 'package:flutter/material.dart';

class AlignmentDemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alignment Demo Screen'),
      ),
      body: Center(
        child: Row(
          // TODO: Add MainAxisAlignment and CrossAxisAlignment here
          children: [
            Container(
              width: 80,
              height: 80,
              color: Colors.red,
            ),
            Container(
              width: 80,
              height: 80,
              color: Colors.green,
            ),
            Container(
              width: 80,
              height: 80,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class AlignmentDemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alignment Demo Screen'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 80,
              height: 80,
              color: Colors.red,
            ),
            Container(
              width: 80,
              height: 80,
              color: Colors.green,
            ),
            Container(
              width: 80,
              height: 80,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

We used a Row widget to arrange three colored boxes horizontally. The mainAxisAlignment property is set to MainAxisAlignment.spaceEvenly which spreads the boxes evenly across the horizontal axis with equal space between and around them. The crossAxisAlignment is set to CrossAxisAlignment.center to vertically center the boxes within the row's height. Each box is a square container of 80x80 pixels with distinct colors to clearly see the alignment effect.

Final Result

Completed Screen

---------------------------------
| Alignment Demo Screen          |
|-------------------------------|
|  [ Red ]   [ Green ]   [ Blue ]|
|                               |
|                               |
|                               |
---------------------------------

The user sees three colored squares spaced evenly in a horizontal row.

The boxes are vertically centered in the available space.

No interactive elements on this screen.

Stretch Goal

Add a Column below the Row that uses CrossAxisAlignment.start to align three text labels to the left.

💡 Hint

Use a Column widget with crossAxisAlignment set to CrossAxisAlignment.start and add three Text widgets inside.