Memperbaiki Luapan: Memperluas

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

Sebuah Text di dalam Row ingin ditampilkan dalam satu baris panjang. Jika barisnya lebih panjang daripada lebar Row, isinya meluap ke kanan, padahal teksnya bisa berpindah ke baris berikutnya.

Teks tidak berpindah ke baris berikutnya karena Row membiarkan setiap child memiliki lebar sesuai keinginannya. Bungkus teks dengan Expanded agar teks mendapat lebar, tepat sebesar ruang yang tersisa setelah child lainnya. Teks dengan lebar yang ditentukan akan berpindah ke lebih banyak baris.

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

Ini adalah perbaikan pertama untuk konten yang meluap ke kanan: berikan Expanded kepada child yang perlu menyusut. Membungkus widget yang sudah kecil, seperti ikon, tidak mengubah apa pun pada teks yang panjang.

Tantangan

Mudah

Alamat pengiriman melampaui tepi kanan. Buat teksnya membungkus ke beberapa baris, sementara panah tetap berada di tepi kanan baris.

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('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}