Flexible umschließt sein Kind

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 3 von 30.

Expanded sorgt dafür, dass ein untergeordnetes Element den verbleibenden Platz ausfüllt, auch wenn es weniger Platz benötigt. Eine Chatblase, die in Expanded eingeschlossen ist, erstreckt sich bei einer Nachricht aus einem Wort über die gesamte Zeile.

Flexible weist einem untergeordneten Element höchstens denselben Platz zu und lässt es kleiner bleiben:

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

Eine kurze Nachricht erhält eine kleine Chatblase. Eine lange Nachricht wächst, bis sie den Rand der Zeile erreicht, und wird dann auf weitere Zeilen umgebrochen, weil Flexible ihr niemals mehr als den verbleibenden Platz einräumt.

Verwende Expanded, wenn das untergeordnete Element den Platz ausfüllen soll, und Flexible, wenn es ihn ausfüllen darf.

Aufgabe

Einfach

Die Hi!-Sprechblase erstreckt sich über den gesamten Bildschirm. Sorge dafür, dass jede Sprechblase nur so breit wie ihre Nachricht ist, während die lange Nachricht weiterhin innerhalb des Bildschirms umgebrochen wird.

Probier es selbst

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