Исправление переполнения: расширение

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 6 из 30.

Текст в Text в Row стремится уместиться в одну длинную строку. Если строка длиннее ряда, содержимое выходит за его правую границу, хотя текст мог бы переноситься.

Текст не переносится, потому что ряд позволяет каждому дочернему элементу иметь любую ширину. Оберни текст в Expanded, и он получит ширину — ровно столько места, сколько оставят остальные дочерние элементы. Текст с ограниченной шириной переносится на несколько строк.

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

Это первый способ исправить выход за правую границу: добавь Expanded к дочернему элементу, который должен сжиматься. Оборачивание виджета, который и так мал, например значка, ничего не меняет для длинного текста.

Задание

Легко

Адрес доставки выходит за правый край. Разбейте его на большее количество строк, чтобы стрелка оставалась у правого края строки.

Попробуйте сами

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