Overflow Fix: Expanded

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 6 of 30.

A Text in a Row wants to be one long line. When the line is longer than the row, the row overflows on the right, even though the text could have wrapped.

The text does not wrap because the row lets each child be as wide as it likes. Wrap the text in Expanded and it gets a width: exactly the space the other children leave. A text with a width wraps onto more lines.

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

This is the first fix for an overflow on the right: give the child that should shrink an Expanded. Wrapping a widget that is already small, like an icon, changes nothing for the long text.

Challenge

Easy

The delivery address spills off the right edge. Make it wrap onto more lines, with the arrow staying at the right edge of the row.

Try it yourself

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