3

I am following the example from the official docs: https://flutter.io/catalog/samples/expansion-tile-sample/

I have added a StreamSubscription that returns every time a Firebase database has a new entry. Everytime this returns, I update data in the example and call setState(){data = newData}.

This theoretically should rebuild the whole ListView with new values and it works just fine however, the big problem is that when the rebuild happens, all of the ExpansionTiles collapse to the default state making the interface completely unusable if updates are frequent.

Does anyone know a way to use the example from the official docs but not have the ExpansionTiles collpased every time?

1 Answer 1

4

The reason state for the ExpansionTile state loss is the fact that it no longer has the same key after data is re-generated. Here is the experiment I ran on top of the documentation code you linked in your question. I am focusing only on the key part, which is where you assign keys to your ExpansionTile:

Widget _buildTiles(Entry root) {
  if (root.children.isEmpty) return new ListTile(title: new Text(root.title));
  return new ExpansionTile(
    key: new PageStorageKey<Entry>(root),
    title: new Text(root.title),
    children: root.children.map(_buildTiles).toList(),
  );
}

Because you are most likely working with immutable data, when you get new data from Firebase, you generate new objects from it. Even though the root has the same data and is the same to you, it is not the same object for Flutter. You now have 2 ways of dealing with this. One is to override == which in my opinion is a bad idea and will explain why with a comment. The second would be to generate your keys from data attributes you know will be the same (like unique database keys). I chose the title attribute for my example.

Widget _buildTiles(Entry root) {
  if (root.children.isEmpty) return new ListTile(title: new Text(root.title));
  return new ExpansionTile(
    key: new PageStorageKey<String>(root.title), // root.title == newerRoot.title is true
    title: new Text(root.title),
    children: root.children.map(_buildTiles).toList(),
  );
}

You can try it out yourself using the updated code in this gist. I also had to make some modifications to the original code from the documentation so I could refresh the data and simulate your situation.

3
  • One of the solutions would be to define == for your data classes, so that even though you generate new objects when data comes in from Firebase, the keys generated in the end are equal to each other. I would not recommend this, since your data might actually change when conceptually it is the same item, so you still want to keep the UI expanded even though you can't say it is "equal" to the old data anymore. Also, overriding equals, hashCode (or similar) has historically been a last resort for me (Java background) for a couple of reasons. Commented Apr 29, 2018 at 15:43
  • I'll refer you to this article if you want to dive deeper into the hidden costs of overriding such methods. I'm sure there are other, better articles, so keep looking if it sparks your interest. Commented Apr 29, 2018 at 15:46
  • Thanks so much for your answer. Making the key constant is something that I never thought of, it works perfectly!
    – jgv115
    Commented Apr 30, 2018 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.