Allineare dentro un riquadro

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 12 di 30.

Center posiziona il suo elemento figlio al centro dello spazio disponibile. Align fa lo stesso in qualsiasi punto tu scelga:

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

I punti prendono il nome dagli angoli e dai bordi: Alignment.topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter e bottomRight. Center equivale a Align con Alignment.center.

Anche Stack accetta un parametro alignment:, che posiziona ogni elemento figlio che non è Positioned: Stack(alignment: Alignment.bottomCenter, children: [...]).

Sfida

Facile

Sposta la didascalia Mountains dal centro della copertina all’angolo inferiore sinistro. La spaziatura interna la mantiene a 16 pixel da entrambi i bordi.

Provalo tu

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