Flexible si adatta al suo elemento figlio

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

Expanded fa sì che un elemento figlio riempia lo spazio rimanente, anche quando ne ha bisogno in misura minore. Un fumetto di chat racchiuso in Expanded si estende per tutta la riga per un messaggio di una sola parola.

Flexible assegna a un elemento figlio lo stesso spazio al massimo e gli permette di rimanere più piccolo:

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

Un messaggio breve ottiene un fumetto piccolo. Un messaggio lungo si espande fino a raggiungere il bordo della riga, poi va a capo su più righe, perché Flexible non gli permette mai di occupare più dello spazio rimanente.

Usa Expanded quando l'elemento figlio deve riempire lo spazio e Flexible quando può riempirlo.

Sfida

Facile

La bolla Hi! si estende su tutto lo schermo. Fai in modo che ogni bolla sia larga solo quanto il suo messaggio, mentre il messaggio lungo continua ad andare a capo all'interno dello schermo.

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