Method returning different StatefulWidgets not updating when different widget is returned

Question

I have a method that returns one of two stateful widgets, based on the value of an enum. However, even though I can see via the debugger that the "correct" widget is being returned, the UI only ever shows the first one that is rendered. It seems the state object is somehow being shared across different instances of the widget, or I'm missing something.

Widget _buildInfoCard(LoginStatus status) {
    switch(status) {
        case LoginStatus.LOGIN_FAILED:
            return InfoCard("Login failed, please check your username and password.");
        default:
            return InfoCard("Please login with your username and password");
    }
}

I expect that the displayed infocard will have the text that corresponds to the text of the returned info card, but the default case always presents. I've stepped through the code, the correct widget is returned, and the default widget is not returned after that, so it should be displayed, but does not.

EDIT: The _buildInfoCard method gets called inside of a streambuilder.

Have you called setState anywhere after the the switch is supposed to be made? — Adrian Murray, Jun 03 '19 at 13:37
That's likely caused by misuse of `StatefulWidget`. Either you need a `didUpdateWidget` or you fell for https://stackoverflow.com/questions/50818770/passing-data-to-a-stateful-widget/50818870#50818870 — Rémi Rousselet, Jun 03 '19 at 14:38
@RémiRousselet I actually do this, thank you for sharing. Truthfully, these should be stateless widgets, I see that now. Still, I'd like to understand why this doesn't work. Why would creating a NEW instance of a widget, cause it to inherit state from an entirely different widget? Shouldn't they be distinct objects in memory, or is there some kind of flutter magic here that I don't understand? — Qumbaala, Jun 03 '19 at 15:40

score 2 · Accepted Answer · edited Jun 03 '19 at 14:07

2

You need to give each instance of your StatefulWidget a key otherwise they may share state, something like this:

Widget _buildInfoCard(LoginStatus status) {
  switch (status) {
    case LoginStatus.LOGIN_FAILED:
      return InfoCard(
        key: ValueKey(status),
        message: "Login failed, please check your username and password.",
      );
    default:
      return InfoCard(
        key: ValueKey(status),
        message: "Please login with your username and password",
      );
  }
}

Very good article about why we need keys here: https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d

edited Jun 03 '19 at 14:07

Rémi Rousselet

256,336
79
519
432

answered Jun 03 '19 at 14:04

Jordan Davies

9,925
6
40
51

2

`UniqueKey` is _not_ the solution here. It makes any rebuild destroy the state of the widget. It works with the linked article because they do it differently. – Rémi Rousselet Jun 03 '19 at 14:08
Why would two distinct objects share state? Wouldn't each one create its own state upon instantiation? – Qumbaala Jun 03 '19 at 15:42
The article was very helpful, it was all new information to me - thank you. – Qumbaala Jun 03 '19 at 16:02

score 1 · Answer 2 · answered Jun 04 '19 at 12:00

For anyone with the same issue - follow the link provided by Jordan Davies, then watch episode 2 of Flutter 101 on YouTube for more information.

The issue is that as you construct your widget tree, the flutter framework translates those widgets into elements, which it then uses to render the UI.

When the flutter framework is constructing the element tree, it looks at each widget and compares the widget type to the element type at a given position in the tree. If the types are the same, flutter may re-use the element.

Stateful widgets have a long-lived state object, they may not get deleted with the wrapping element when a new one added to the element tree. In this case, the newly returned widget may use an existing state object from a previously rendered stateful widget.

The solution is as Jordan suggested, use keys to prevent this from hapenning, or use stateless widgets. There are other methods on Stateful widgets that may work as well, but Jordan's answer best addresses my expectations.

Method returning different StatefulWidgets not updating when different widget is returned

2 Answers2