CODEWITHSUNDEEP
flutter
Amine
Amine

Reputation: 1476

Flutter ExpansionPanelList inside a modalBottomSheet doesn't update state

I have a Modal Bottom Sheet where I want to put a list of expansions. In order to do so, I made a class to create items for my ExpansionPanelList.

class FilterItem {
  bool isExpanded;
  final String header;
  final Widget body;
  FilterItem(this.isExpanded, this.header, this.body);
}

I simply provide each item with the isExpanded boolean to tell whether it's initially expanded or not, the header of the ExpansionPanel (works as intended) and the body of the ExpansionPanel.

I have a List of items like this:

items = <FilterItem>[
    new FilterItem(
        false,
        'Bit Size',
        GridView.builder(
        shrinkWrap: true,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemCount: _docs["Bit Size"].length,
        itemBuilder: (context,index) {
            return Text(_docs["Bit Size"].elementAt(index),style:TextStyle(color:Colors.black));
        },
        )
    ),
];

I'm testing with one item right now, its body is a GridView, I haven't got the chance to test whether it shows correctly because the expanding of the ExpansionPanel does not work.

This List of items is used with an ExpansionPanelList inside the showModalBottomSheet() method which I invoke using a button. This is the body of the method:

showModalBottomSheet(
    context: context,
    builder: (context) {
    return ListView.builder(
        shrinkWrap: true,
        itemCount: (items.length == null) ? 0:items.length,
        itemBuilder: (context,index) {
        return ExpansionPanelList(
            expansionCallback: (int index, bool isExpanded) {
            setState(() {
                items[index].isExpanded = !items[index].isExpanded;
            });
            },
            children: items.map((FilterItem item) {
            print("b");
            return ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                return ListTile(
                    title: new Text(
                        item.header,
                        textAlign: TextAlign.left,
                        style: new TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.w400,
                        ),
                    ));
                },
                isExpanded: item.isExpanded,
                body: item.body,
            );
            }).toList(),
        );
        },
    );
    },
    isScrollControlled: true,
);

As you can see, I've set the isExpanded property of the ExpansionPanel to the value of the item in the list, and in the ExpansionPanelList callback, I update it inside a setState.

This is where the problem occurs, the expanding does not work. What am I doing wrong here?

Upvotes: 1

Views: 803

Answers (1)

Mohamed Gaber
Mohamed Gaber

Reputation: 1745

to update state in Bottom Sheet you need to wrap your returned widget by StatefulBuilder like 

showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return StatefulBuilder(
        builder: (BuildContext context,StateSetter  setStateOfBottomSheet) {
          return Column(
            children: <Widget>[
              FlatButton(
                  onPressed: () {
               setStateOfBottomSheet;
                  },
                  child: Text('Hello'))
            ],
          );
        },
      );
    });

then you can call this object which i named it in this previous code :setStateOfBottomSheet when you call it you able to update state of your Bottom sheet

Upvotes: 2

Related Questions