I put the list view as the ExpansionPanel child, when the list view element increase, shows error like this:

Launching lib/main.dart on iPod touch (7th generation) in debug mode...
Running Xcode build...
Xcode build done.                                           14.8s
Debug service listening on ws://127.0.0.1:63754/UQLxQBvquj8=/ws
Syncing files to device iPod touch (7th generation)...

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 390 pixels on the bottom.

The relevant error-causing widget was: 
  Column Column:file:///Users/untitled/lib/main.dart:46:15
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#62cb3 relayoutBoundary=up1 OVERFLOWING
...  needs compositing
...  parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
...  constraints: BoxConstraints(0.0<=w<=320.0, 0.0<=h<=568.0)
...  size: Size(320.0, 568.0)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================

Why the list view did not scroll automatically? What should I do to handle the overflow problem? This is the minimal reproduce code:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget buildNewTasks(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      itemCount: 50,
      itemBuilder: (BuildContext context, int index) {
        return Text(index.toString());
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        ExpansionPanelList(
          expansionCallback: (int index, bool isExpanded) {
            if (index == 1) {}
          },
          children: [
            ExpansionPanel(
                headerBuilder: (context, isExpanded) {
                  return ListTile(
                    title: Text("Todo"),
                  );
                },
                body: buildNewTasks(context),
                isExpanded: true,
                canTapOnHeader: true),
          ],
        )
      ],
    ));
  }
}

CodePudding user response：

Wrap the column with a SingleChildScrollView

SafeArea(
  child : SingleChildScrollView(
     child : Column(
      children: [
        ExpansionPanelList(
          expansionCallback: (int index, bool isExpanded) {
            if (index == 1) {}
          },
          children: [
            ExpansionPanel(
                headerBuilder: (context, isExpanded) {
                  return ListTile(
                    title: Text("Todo"),
                  );
                },
                body: buildNewTasks(context),
                isExpanded: true,
                canTapOnHeader: true),
          ],
        )
   )
) 

CodePudding user response：

Wrap your columnn with singlechildScrollVIew