Naprawa przepełnienia: rozwinięcie

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 6 z 30.

Element Text w Row chce zmieścić się w jednym długim wierszu. Gdy wiersz jest dłuższy niż Row, zawartość Row wystaje z prawej strony, mimo że tekst mógłby zostać zawinięty.

Tekst nie jest zawijany, ponieważ Row pozwala każdemu elementowi potomnemu mieć dowolną szerokość. Owiń tekst w Expanded, a otrzyma on szerokość równą dokładnie tej przestrzeni, którą pozostawią pozostałe elementy potomne. Tekst o określonej szerokości zawija się do większej liczby wierszy.

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

To pierwsze rozwiązanie problemu wystawania zawartości z prawej strony: użyj Expanded dla elementu potomnego, który powinien się zmniejszyć. Owinięcie w ten sposób widżetu, który już jest mały, na przykład ikony, nic nie zmienia w przypadku długiego tekstu.

Wyzwanie

Łatwy

Adres dostawy wychodzi poza prawą krawędź. Spraw, aby zawijał się do większej liczby wierszy, a strzałka pozostała przy prawej krawędzi wiersza.

Spróbuj swoich sił

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