【Flutter】ListViewをColumnに格納する方法

「ListViewをColumnのchildrenプロパティに格納したらエラーが出た！」って方のために対処法を紹介します。

解消したいエラー

//エラーが発生
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: Column(
        children: [
          ListView(
            children: [
              ListTile(
                title: Text('Hello World1'),
              ),
              ListTile(
                title: Text('Hello World2'),
              ),
              ListTile(
                title: Text('Hello World3'),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

上記コードのようにListViewをColumnのchildプロパティに直接格納すると、ListViewが占める範囲が分からないから「RenderBox was not laid out: RenderViewport ...」のエラーが生じます。

よって、エラーを解消するにはExpandedでListViewをラップします。

解決策

ListViewをExpandedでラップすればColumnに格納できるようになります。

//ソース
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Column(
          children: [
            Expanded(
              child: ListView(
                children: [
                  ListTile(
                    title: Text('Hello World1'),
                  ),
                  ListTile(
                    title: Text('Hello World2'),
                  ),
                  ListTile(
                    title: Text('Hello World3'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以上です。