Align Inside a Box

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 12 of 30.

Center puts its child in the middle of the space it has. Align does the same for any spot you choose:

Container(
  height: 200,
  color: Colors.teal,
  child: const Align(
    alignment: Alignment.topRight,
    child: Text('Top right'),
  ),
)

The spots are named after the corners and edges: Alignment.topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter and bottomRight. Center is Align with Alignment.center.

A Stack takes an alignment: too, which places every child that is not Positioned: Stack(alignment: Alignment.bottomCenter, children: [...]).

Challenge

Easy

Move the Mountains caption from the middle of the cover to its bottom left corner. The padding keeps it 16 pixels from both edges.

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Travel')),
        body: Column(
          children: [
            Container(
              height: 240,
              color: Colors.indigo,
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: Text(
                    'Mountains',
                    style: TextStyle(fontSize: 28, color: Colors.white),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}