Uma largura máxima

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 15 de 30.

Um cartão com um texto longo fica tão largo quanto a tela. Em um celular, isso parece bom; em um tablet, o mesmo cartão se estende em uma linha de mil pixels, o que dificulta a leitura.

ConstrainedBox define limites para o tamanho do filho. maxWidth: é o máximo que ele pode crescer:

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

Em uma tela com menos de 400 pixels de largura, o cartão ainda encolhe para caber. Em uma tela mais larga, ele para nos 400, e o texto quebra em mais linhas.

BoxConstraints também aceita minWidth:, minHeight: e maxHeight:. Um mínimo é o menor tamanho que um filho pode ter, então ele nunca impede que o filho cresça.

Desafio

Fácil

Mantenha o cartão da citação legível em telas largas: deixe-o crescer até no máximo 320 pixels de largura.

Experimente você mesmo

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