Flexible épouse son enfant

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 3 sur 30.

Expanded fait occuper à un enfant tout l’espace restant, même si l’enfant a besoin de moins. Une bulle de discussion enveloppée dans Expanded s’étire sur toute la ligne pour un message d’un seul mot.

Flexible donne à un enfant au maximum le même espace , et lui permet de rester plus petit :

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

Un message court obtient une petite bulle. Un message long s’agrandit jusqu’à atteindre le bord de la ligne, puis se répartit sur plusieurs lignes, car Flexible ne le laisse jamais prendre plus que l’espace restant.

Utilisez Expanded lorsque l’enfant doit remplir l’espace, et Flexible lorsqu’il peut le remplir.

Défi

Facile

La bulle Hi! s’étend sur toute la largeur de l’écran. Faites en sorte que chaque bulle soit aussi large que son message, tout en permettant au long message de revenir à la ligne à l’intérieur de l’écran.

Essayez vous-même

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