In einer Box ausrichten

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 12 von 30.

Center platziert sein Kindelement in der Mitte des verfügbaren Platzes. Align macht dasselbe an jeder beliebigen Stelle:

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

Die Stellen sind nach den Ecken und Kanten benannt: Alignment.topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter und bottomRight. Center ist Align mit Alignment.center.

Auch ein Stack akzeptiert ein alignment:, das jedes Kindelement platziert, das nicht Positioned ist: Stack(alignment: Alignment.bottomCenter, children: [...]).

Aufgabe

Einfach

Verschiebe die Beschriftung Mountains von der Mitte des Titelbilds in die linke untere Ecke. Der Innenabstand hält sie 16 Pixel von beiden Rändern entfernt.

Probier es selbst

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