Una larghezza massima

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

Una scheda con un testo lungo si allarga fino a occupare tutta la larghezza dello schermo. Su un telefono va bene; su un tablet, la stessa scheda si estende su un’unica riga lunga mille pixel, difficile da leggere.

ConstrainedBox imposta dei limiti alle dimensioni del suo elemento figlio. maxWidth: indica la larghezza massima che può raggiungere:

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 400),
  child: Container(...),
)

Su uno schermo più stretto di 400 pixel, la scheda si riduce comunque per adattarsi. Su uno più largo, si ferma a 400 e il testo va a capo su più righe.

BoxConstraints accetta anche minWidth:, minHeight: e maxHeight:. Un valore minimo indica la dimensione più piccola che può avere un elemento figlio, quindi non gli impedisce mai di crescere.

Sfida

Facile

Mantieni la scheda della citazione leggibile sugli schermi ampi: lascia che raggiunga una larghezza massima di 320 pixel.

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('Quote of the Day')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.amber.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Text(
                'The best way to learn to build apps is to build apps, one small screen at a time.',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}