オーバーフローエラー

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

スマートフォンの画面は小さいものです。Rowの子要素に画面幅より広い幅が必要な場合、Flutterははみ出した端に黄色と黒の縞模様を描画し、Consoleにメッセージを表示します。

A RenderFlex overflowed by 60 pixels on the right.

このメッセージは3つの部分に分けて読みます。RenderFlexはRowまたはColumnです。60 pixelsは、子要素がどれだけ大きすぎるかを示します。On the rightは行が広すぎるという意味で、on the bottomは列が高すぎるという意味です。

この数値は単純な計算で求められます。幅150ピクセルのボックスが3つあると450ピクセル必要ですが、スマートフォンの幅は390ピクセルなので、60ピクセル分がはみ出します。子要素全体の幅を60ピクセル小さくすれば、縞模様は消えます。

このコースのすべてのチェックは幅390ピクセルのスマートフォンで実行されるため、オーバーフローがあると同じメッセージが表示され、チェックに失敗します。

チャレンジ

簡単

実行を押して、右端にある縞模様を見つけましょう。次に、それぞれのタイルの幅を120ピクセルにして、3つすべてがスマートフォンに収まるようにしましょう。

自分で試してみよう

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('Trips')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.orange,
                  child: const Center(child: Text('Beach')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.green,
                  child: const Center(child: Text('Forest')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.blueGrey,
                  child: const Center(child: Text('City')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}