オーバーフローの解決：拡大

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 6/30。

Row 内の Text は、1行に収まろうとします。行が Row より長いと、テキストを折り返せる場合でも、右側にはみ出します。

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