title: Flutter - Expandable - How to keep the panel expanded when changing the state
body: <p>I am using the expandable package (<a href="https://pub.dev/packages/expandable" rel="nofollow noreferrer">https://pub.dev/packages/expandable</a>), and when I call the setState () method when taping on a checkbox the expandable panel closes during the widget tree reconstruction.</p>
  <p>When I call setState () I tell the controller to keep the panel expanded <strong>expController.expanded = true</strong>, but that doesn't work.</p>
  <p>I researched and it seems to me that the solution would be to use <strong>a key</strong>, but my tests did not work.</p>
  <p>Can someone help me? I need to change the state of the checkbox, but keep the panel expanded.
  Here is an sample from my code:</p>
  <pre><code>class ExpandableCard extends StatefulWidget {
    ExpandableCard({Key key}) : super(key: key);
  
    @override
    _ExpandableCardState createState() =&gt; _ExpandableCardState();
  }
  
  class _ExpandableCardState extends State&lt;ExpandableCard&gt; {
    var _value = false;
  
    @override
    Widget build(BuildContext context) {
      ExpandableController expController =
          new ExpandableController(initialExpanded: false);
  
      return ExpandableNotifier(
          controller: expController,
          child: Padding(
            padding: const EdgeInsets.all(2),
            child: Card(
              clipBehavior: Clip.antiAlias,
              child: Column(
                children: &lt;Widget&gt;[
                  ScrollOnExpand(
                    scrollOnExpand: true,
                    scrollOnCollapse: false,
                    child: ExpandablePanel(
                      theme: const ExpandableThemeData(
                        headerAlignment: ExpandablePanelHeaderAlignment.center,
                        tapBodyToCollapse: false,
                        tapHeaderToExpand: true,
                        tapBodyToExpand: true,
                        hasIcon: true,
                      ),
                      header: Padding(
                        padding: EdgeInsets.all(10),
                        child: Text('HEADER'),
                      ),
                      collapsed: Padding(
                        padding: EdgeInsets.only(left: 4),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('collapsed'),
                          ],
                        ),
                      ),
                      expanded: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: &lt;Widget&gt;[
                          for (var _ in Iterable.generate(3))
                            Padding(
                              padding: EdgeInsets.only(left: 2, bottom: 2),
                              child: Row(
                                children: [
                                  Checkbox(
                                    value: _value,
                                    onChanged: (bool value) {
                                      setState(() {
                                        this._value = value;
                                        expController.expanded = true;
                                      });
                                    },
                                  ),
                                  Text('Checkbox'),
                                ],
                              ),
                            ),
                        ],
                      ),
                      builder: (_, collapsed, expanded) {
                        return Padding(
                          padding:
                              EdgeInsets.only(left: 10, right: 10, bottom: 10),
                          child: Expandable(
                            collapsed: collapsed,
                            expanded: expanded,
                            theme: const ExpandableThemeData(crossFadePoint: 0),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ));
    }
  }
  </code></pre>