[Solved] ExpansionPanel can’t be assigned to the list type ’Widget’

In this post, we are going to show you how to solve "The element type 'ExpansionPanel' can't be assigned to the list type 'Widget'." Error in Flutter. This error occurs when you use ExpansionPanel without ExpansionPanelList. See the solution below:

Error Message:

The element type 'ExpansionPanel' can't be assigned to the list type 'Widget'.

Cause of Error:

This error occurs when you use ExpansionPanel without ExpansionPanelList as a Widget in Flutter. See the solution below:

Solution:

To solve, this issue, add a ExpansionPanelList() widget and put your all ExpansionPanel() inside it. For Example:

See this also: How to Add Accordion in Flutter

ExpansionPanelList(
    children:[
      ExpansionPanel(
          headerBuilder: (context, isOpen){
            return Container();
          },
          body: Container(),
      ),

      ExpansionPanel(
          headerBuilder: (context, isOpen){
            return Container();
          },
          body: Container(),
      )
    ]
)

This is the basic ExpansionPanelList and ExpansionPanel widgets tree. See the full app example, on how to use these correctly.

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 THREE")
                        );
                      },
                      body: Container(
                        padding: EdgeInsets.all(20),
                        color: Colors.redAccent[100],
                        child: Text("hello world"),
                      ),
                      isExpanded: expanded[0]
                  ),

                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return Padding( 
                            padding: EdgeInsets.all(15),
                            child:Text("FAQ QUESTIOn FOUR")
                        );
                      },
                      body: Container(
                        padding: EdgeInsets.all(20),
                        color: Colors.blueAccent[100],
                        child: Text("hello world"),
                      ),
                      isExpanded: expanded[1]
                  )
                ]
             )
          )
       );
  }
}

In this way, you can solve "The element type 'ExpansionPanel' can't be assigned to the list type 'Widget'." error in Flutter.