Flexible Mengikuti Ukuran Anak

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 3 dari 30.

Expanded membuat child mengisi ruang yang tersisa, bahkan saat child membutuhkan lebih sedikit ruang. Gelembung chat yang dibungkus dengan Expanded membentang sepanjang baris untuk pesan satu kata.

Flexible memberi child ruang yang sama paling banyak, dan membiarkannya tetap lebih kecil:

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

Pesan pendek mendapat gelembung kecil. Pesan panjang membesar hingga mencapai tepi baris, lalu berlanjut ke baris berikutnya, karena Flexible tidak pernah membiarkannya mengambil ruang lebih banyak daripada yang tersisa.

Gunakan Expanded saat child harus mengisi ruang, dan Flexible saat child boleh mengisinya.

Tantangan

Mudah

Gelembung Hi! melebar memenuhi seluruh layar. Buat setiap gelembung selebar pesannya saja, sementara pesan yang panjang tetap membungkus teks di dalam layar.

Coba sendiri

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