Un ancho máximo

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 15 de 30.

Una tarjeta con un texto largo se ensancha hasta ocupar todo el ancho de la pantalla. En un teléfono eso está bien; en una tableta, la misma tarjeta se extiende en una sola línea de mil píxeles, lo que dificulta la lectura.

ConstrainedBox establece límites al tamaño de su elemento hijo. maxWidth: es el máximo que puede crecer:

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

En una pantalla de menos de 400 píxeles de ancho, la tarjeta sigue reduciéndose para ajustarse. En una más ancha, se detiene en 400 y el texto se divide en más líneas.

BoxConstraints también acepta minWidth:, minHeight: y maxHeight:. Un mínimo es lo mínimo que puede medir un elemento hijo, así que nunca impide que crezca.

Desafío

Fácil

Mantén la tarjeta de la cita legible en pantallas anchas: permite que crezca hasta un máximo de 320 píxeles de ancho.

Pruébalo tú mismo

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