Nikita
Nikita

Reputation: 765

How to make just one ExpansionPanel, in an ExpansionPanelList different to the others? flutter

As the question suggests I have an ExpansionPanelList, one ExpansionPanel (the last one or the 7th one) should have 2 additional buttons, but how can I add them just in this one last panel & not in all the others as well?

This is the code of my whole Expansion panel, as Im not sure where you have to add the behaviour, but guessing in the body of the ExpansionPanel (close to line 40):

    class ExpansionList extends StatefulWidget {
  final Info info;

  const ExpansionList({
    Key key,
    this.info,
  }) : super(key: key);
  @override
  _ExpansionListState createState() => _ExpansionListState();
}

class _ExpansionListState extends State<ExpansionList> {
  Widget _buildListPanel() {
    return Container(
      child: Theme(
        data: Theme.of(context).copyWith(
          cardColor: Color(0xffDDBEA9),
        ),
        child: ExpansionPanelList(
          dividerColor: Colors.transparent,
          elevation: 0,
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              infos[index].isExpanded = !isExpanded;
            });
          },
          children: infos.map<ExpansionPanel>((Info info) {
            return ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return ListTile(
                    title: !isExpanded
                        ? Text(
                            info.headerValue,
                          ) //code if above statement is true
                        : Text(
                            info.headerValue,
                            textScaleFactor: 1.3,
                            style: TextStyle(
                            fontWeight: FontWeight.bold,
                            ),
                          ),
                  );
                },
                body: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    decoration: BoxDecoration(
                        color: Color(0xffFFE8D6),
                        borderRadius: BorderRadius.circular(25)),
                    child: Column(
                      children: [
                        ListView.separated(
                          physics: const NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          padding: EdgeInsets.only(left: 40.0,),
                          itemCount: info.expandedValueData.length,
                          itemBuilder: (context, index) {
                            return CheckboxListTile(
                                title: Text(info.expandedValueData[index].title,
                                    style: TextStyle(
                                        decoration: info.expandedValueData[index]
                                                .completed
                                            ? TextDecoration.lineThrough
                                            : null)),
                                value: info.expandedValueData[index].completed,
                                onChanged: (value) {
                                  setState(() {
// Here you toggle the checked item state
                                    infos.firstWhere(
                                        (currentInfo) => info == currentInfo)
                                      ..expandedValueData[index].completed =
                                          value;
                                  });
                                });
                          },
                          separatorBuilder: (BuildContext context, int index) {
                            return SizedBox(
                              height: 20,
                            );
                          },
                        ),
                        Row(children: [
                          SizedBox(
                              width: MediaQuery.of(context).size.width * 0.16),
                          Text("Abschnitt bis zum Neustart löschen"),
                          SizedBox(
                              width: MediaQuery.of(context).size.width * 0.11),
                          IconButton(
                            icon: Icon(Icons.delete),
                            onPressed: () {
                              setState(() {
                                infos.removeWhere(
                                    (currentInfo) => info == currentInfo);
                              });
                            },
                          )
                        ]),
                      ],
                    ),
                  ),
                ),
                isExpanded: info.isExpanded);
          }).toList(),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: _buildListPanel(),
      ),
    );
  }
}

Thanks for suggestions!

Upvotes: 0

Views: 1220

Answers (1)

gbaccetta
gbaccetta

Reputation: 4577

Hi Just add a field (if you already do not have one) in the info object that will allow you to change the widget that is inflated based on that field. For example

...
children: infos.map<ExpansionPanel>((Info info) {
  return ExpansionPanel(
    headerBuilder: (BuildContext context, bool isExpanded) {
      return info.type == TYPE_A ? TypeAWidgetHeader(info) : TypeBWidgetHeader(info);
    body: info.type == TYPE_A ? TypeAWidgetBody(info) : TypeBWidgetBody(info);
...

Upvotes: 1

Related Questions