Aligner à l’intérieur d’une boîte

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 12 sur 30.

Center place son enfant au milieu de l’espace dont il dispose. Align fait de même pour n’importe quel endroit de ton choix :

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

Les emplacements portent le nom des coins et des bords : Alignment.topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter et bottomRight. Center est un Align avec Alignment.center.

Un Stack accepte également un paramètre alignment:, qui positionne chaque enfant qui n’est pas Positioned : Stack(alignment: Alignment.bottomCenter, children: [...]).

Défi

Facile

Déplace la légende Mountains du milieu de la couverture vers son coin inférieur gauche. La marge intérieure la maintient à 16 pixels des deux bords.

Essayez vous-même

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),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}