Flexible se ajusta a su hijo

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

Expanded hace que un elemento hijo ocupe el espacio restante, incluso cuando necesita menos. Una burbuja de chat dentro de Expanded se extiende por toda la fila para un mensaje de una sola palabra.

Flexible le da a un elemento hijo como máximo el mismo espacio y permite que ocupe menos:

Row(
  children: [
    const CircleAvatar(child: Text('A')),
    Flexible(
      child: Container(
        color: Colors.grey.shade300,
        child: const Text('Hello'),
      ),
    ),
  ],
)

Un mensaje corto obtiene una burbuja pequeña. Un mensaje largo crece hasta llegar al borde de la fila y después se ajusta en más líneas, porque Flexible nunca le permite ocupar más del espacio restante.

Usa Expanded cuando el elemento hijo deba ocupar todo el espacio, y Flexible cuando pueda ocuparlo.

Desafío

Fácil

La burbuja Hi! se extiende por toda la pantalla. Haz que cada burbuja tenga solo el ancho de su mensaje, mientras que el mensaje largo siga ajustándose dentro de la pantalla.

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('Chat')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const CircleAvatar(child: Text('S')),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Text('Hi!'),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              Row(
                children: [
                  const CircleAvatar(child: Text('S')),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Text(
                        'Are you coming to the park later? We meet at the big tree by the lake.',
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}