CODEWITHSUNDEEP
flutterdart
Megan Goulet
Megan Goulet

Reputation: 93

How to Change Arrow Icon in ExpansionPanelList

I am new to Flutter, and I am currently working on creating an ExpansionPanelList. I am trying to replace the icon next to the ExpansionPanel from a carrot (^) to a dropdown icon. Additionally, I would like the dropdown arrow to spin up when the ExpansionPanel is expanded. However, I am not sure how to do this.

Below is how I initialize my ExpansionPanelList. I attempted to solve this problem initializing the arrow I want to use in my ListTitle (where I initialize the header). However, the Icon appears next to the carrot icon that the ExpansionPanel uses.

I am very new to Flutter (and sort-of new to Stack Overflow in general), so a detained explanation would be very much appreciated.

ExpansionPanelList(
                    expansionCallback: (int index, bool isExpanded) {
                      setState(() {
                        _data[index].isExpanded = !isExpanded;
                      });
                    },
                    children: _data.map<ExpansionPanel>((Item item) {
                     // I believe this is where we want to edit the arrow.
                      return ExpansionPanel(
                        headerBuilder: (BuildContext context, bool isExpanded) {
                          
                          return ListTile(
                            title: Text("yoink"), //Text(item.headerValue),
                            trailing: Icon(Icons.arrow_drop_down), //solid arrow
                          );
                        },
                        body: ListTile(
                            title: Text(item.expandedValue),
                            subtitle: Text(
                                'To delete this panel, tap the trash can icon'),
                            trailing: Icon(Icons.delete),
                            onTap: () {
                              setState(() {
                                _data.removeWhere(
                                    (currentItem) => item == currentItem);
                              });
                            }),
                        isExpanded: item.isExpanded,
                      );
                    }).toList(),
                  ),

Output

For my output, I would like the arrow on the left of each ExpansionPanel to show + respond to expanding/unexpanding the panel. I don't want to see the arrow on the right.

Upvotes: 1

Views: 6309

Answers (1)

Megan Goulet
Megan Goulet

Reputation: 93

The answer was to make an implementation of a ListView instead. ExpansionPanels are like ListViews with ExpansionTiles, however they are more strict and you cannot customize ExpansionPanels as much as ExpansionTiles, which can only be used in a ListView.

Upvotes: 5

Related Questions