(workaround found) ExpandablePanel no longer collapsed, nested ExpandablePanels close parents

[StefanLobbenmeier]

Hi :) I used (and contributed to) this project some time ago. But after upgrading the Expandable my nested ExpandablePanels were acting weird, the inner expandable was able to close the outer ones. Single ExpandablePanels were not able to close anymore.

Looking through the source code and debugging I found that in this line the Expanded Controller was null. In case of nested, it returned the one of the parent.

flutter-expandable/lib/expandable.dart

Line 453 in 5acd2ec

final controller = this.controller ?? ExpandableController.of(context);

I was able to resolve this behaviour by removing the ExpandableController from my ExpandablePanel and instead wrapping the widget in a ExpandableNotifier.

Please include a log telling the programmer that no ExpandableNotifier was found / that an own one needs to be provided. Or ideally provide the ExpandableNotifier to the outer Expandable and not the children.

Code to reproduce (basically flutter starter + example from here without the notifier)

import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  String loremIpsum = "Lorem Ipsum";

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            // copied from example
            ExpandablePanel(
              theme: const ExpandableThemeData(
                headerAlignment: ExpandablePanelHeaderAlignment.center,
                tapBodyToCollapse: true,
              ),
              header: Padding(
                  padding: EdgeInsets.all(10),
                  child: Text(
                    "ExpandablePanel",
                    style: Theme.of(context).textTheme.body2,
                  )),
              collapsed: Text(
                loremIpsum,
                softWrap: true,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              expanded: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  for (var _ in Iterable.generate(5))
                    Padding(
                        padding: EdgeInsets.only(bottom: 10),
                        child: Text(
                          loremIpsum,
                          softWrap: true,
                          overflow: TextOverflow.fade,
                        )),
                ],
              ),
              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),
                  ),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

[houdayec]

I found the solution here on issue #15