[Solved] RenderListBody must have unlimited space along its main axis

In this post, we are going to show you how to solve "RenderListBody must have unlimited space along its main axis" error in Flutter. This error occurs when RenderListBody has no unlimited space on its main axis. See the example below:

Error Message:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════════
The following assertion was thrown during performLayout():
RenderListBody must have unlimited space along its main axis.
RenderListBody does not clip or resize its children, so it must be placed in a parent that does not
constrain the main axis.
You probably want to put the RenderListBody inside a RenderViewport with a matching main axis.

Cause of Error:

To understand the cause of this error, you must understand what is "MAIN AXIS" is. For Column, its verticle layout, or on row its horizontal layout as shown in the diagram below:

If you are adding RenderListBody in your widget tree, the parent widget must have unlimited space on its main axis direction, for example: Put ExpansionPanelList() to SingleChildScrollView() widget.

Solution of Error:

In our case, we got this error with ExpansionPanelList on our widget tree, to solve this issue, wrap this widget with SingleChildScrollView() widget.

SingleChildScrollView(
    child:ExpansionPanelList()
)

Or, you can also wrap it with a Column() widget, for example:

Column(
   children:[
       ExpansionPanelList()
     ]
)

Full App Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  List<bool> expanded = [false, false];
  //expaned status boolean for ExpansionPanel
  //we have two panels so the bool value
  //set bool to true, if you want to expand accordion by default

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("ExpansionPanel in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          body: SingleChildScrollView(
             child:ExpansionPanelList(
                expansionCallback: (panelIndex, isExpanded) {
                    setState(() {
                      expanded[panelIndex] = !isExpanded;
                    });
                },
                children:[
                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return Padding( 
                            padding: EdgeInsets.all(15),
                            child:Text("FAQ QUESTION")
                        );
                      },
                      body: Container(
                        child: Text("hello world"),
                      ),
                      isExpanded: expanded[0]
                  ),

                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return Padding( 
                            padding: EdgeInsets.all(15),
                            child:Text("FAQ QUESTION")
                        );
                      },
                      body: Container(
                        child: Text("hello world"),
                      ),
                      isExpanded: expanded[1]
                  )
                ]
             )
          )
       );
  }
}

In this way, you can solve "RenderListBody must have unlimited space along its main axis" error in Flutter.