オーバーフローの解決：スクロール

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

画面に収まりきらない数の子要素を持つColumnは、下にはみ出します。スマートフォンの画面の高さには限りがあり、Columnはそれ自体ではスクロールしません。

SingleChildScrollViewで囲みます。すると、Columnは必要なだけ高くなり、画面をドラッグして残りを見られるようになります。

SingleChildScrollView(
  child: Column(
    children: [
      // 子ウィジェットはいくつでも追加できます
    ],
  ),
)

画面より長いページ（設定ページ、フォーム、記事など）には、これが解決策です。同じ種類の項目が並ぶ長いリストには、すでに知っているListViewを使うと同じように表示できます。

スクロールビューは列全体を囲みます。各子要素を個別のスクロールビューで囲んでも、列の高さは以前と変わりません。

チャレンジ

簡単

週の表示が下にはみ出しています。ページをスクロールできるようにして、Sundayまでたどり着けるようにしましょう。

自分で試してみよう

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('This Week')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              for (final day in days)
                Container(
                  height: 120,
                  margin: const EdgeInsets.only(bottom: 12),
                  decoration: BoxDecoration(
                    color: Colors.lightBlue.shade100,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Center(child: Text(day, style: const TextStyle(fontSize: 20))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}