Answers for "Flutter ExpansionPanel"

expansionpanel flutter

You cannot use ExpansionPanel itself it gives errors such as 
The element type 'ExpansionPanel' can't be assigned to the list type 'Widget'.
What you need to do is to use ExpansionPanelList and in that case
if you want to display only one ExpansionPanel then in the list you only 
have one data. Here is the code example.


1. Create a named Item Model which will hold the data for our item.

class ItemModel {
  bool expanded;
  String headerItem;
  String discription;
  Color colorsItem;
  String img;

  ItemModel(
      {this.expanded = false,
      required this.headerItem,
      required this.discription,
      required this.colorsItem,
      required this.img});
}

2. Create your ExpandedData list using your ItemModel example.

List<ItemModel> itemData = <ItemModel>[
    ItemModel(
        headerItem: 'Android',
        discription:
            "Android is a mobile operating system based on a modified version of the Linux kernel and other open source software, designed primarily for touchscreen mobile devices such as smartphones and tablets. ... Some well known derivatives include Android TV for televisions and Wear OS for wearables, both developed by Google.",
        colorsItem: Colors.green,
        img:
            'https://pbs.twimg.com/profile_images/1141781661551665153/BMnvVd2u_400x400.jpg'),
  ];
  
3. Return a ListView.builder(in my case) which will return ExpandedPanelList with ExpandedPanel in it.

ListView.builder(
            itemCount: itemData.length,
            itemBuilder: (BuildContext context, int index) {
              return ExpansionPanelList(
                animationDuration: const Duration(milliseconds: 1000),
                dividerColor: Colors.red,
                elevation: 1,
                children: [
                
                  ExpansionPanel(
                    body: Container(
                      padding: const EdgeInsets.all(10),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          ClipOval(
                            child: CircleAvatar(
                              child: Image.network(
                                itemData[index].img,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          const SizedBox(
                            height: 30,
                          ),
                          Text(
                            itemData[index].discription,
                            style: TextStyle(
                                color: Colors.grey[700],
                                fontSize: 15,
                                letterSpacing: 0.3,
                                height: 1.3),
                          ),
                        ],
                      ),
                    ),
                    headerBuilder: (BuildContext context, bool isExpanded) {
                      return Container(
                        padding: EdgeInsets.all(10),
                        child: Text(
                          itemData[index].headerItem,
                          style: TextStyle(
                            color: itemData[index].colorsItem,
                            fontSize: 18,
                          ),
                        ),
                      );
                    },
                    isExpanded: itemData[index].expanded,
                  )
                ],
                expansionCallback: (int item, bool status) {
                  setState(() {
                    itemData[index].expanded = !itemData[index].expanded;
                  });
                },
              );
            })