.watch properly works for a floatingActionButton but not for Appbar actions ?

[mark8044]

I have the following bit of code (cut short for space reasons, full code can be provided if needed)

    return WillPopScope(
      onWillPop: _onWillPop,
        child: Scaffold(
            appBar: AppBar(
              title: Text('Title')
              actions: <Widget>[
                MyUserIcon()
              ],
            ),
            floatingActionButton:
            (int.parse(ref.watch(globalUserDataProvider).userid) > 0) ?
            FloatingActionButton( ...) 
            : null,
            body: Stack( ... )

When my globalUserDataProvider is updated, my FloatingActionButton updates in realtime and I see the button appear or disappear depending on if userid is > 0. Thats working great, looks and runs amazingly!

However

I also have a user Icon sitting in the appbar in the actions area MyUserIcon(). This part does not update in realtime when the globalUserDataProvider is updated

Here is the MyUserIcon() widget condensed. In order to keep things small in this report, Ive replaced the actual images with Text widgets here, User is NOT logged in and User is logged in.

What should be happening is those text widgets should update in real-time when globalUserDataProvider is updated, but they aren't changing

Is this something to do with my code or to do with the structure of riverpod do you think?

class MyUserIcon extends ConsumerStatefulWidget {
  MyUserIcon({Key? key, this.callback}) : super(key: key);

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


class _MyUserIconState extends ConsumerState<MyUserIcon> with WidgetsBindingObserver {

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    var data = ref.watch(globalUserDataProvider);


    return
      Container(
          child:Row(
            children: [
              IconButton(
                padding: EdgeInsets.zero,
                icon:
                (int.parse(ref.watch(globalUserDataProvider).userid) > 0)
                    ?
                Container(margin:EdgeInsets.fromLTRB(0.0, 0, 5.0, 4.0),
                    child: ClipRRect(borderRadius: BorderRadius.circular(100.0),
                        child:
                        (int.parse(ref.watch(globalUserDataProvider).userid) > 0) ?
                        Text('User is logged in')
                            :
                            Text('User is NOT logged in')
                    ))
                    :
                Text('User is NOT logged in')
                onPressed: () async {
...
                },
              ),
            ],
          )
      );

  }
}

[mark8044]

I actually got around the issue for now by putting a timer into the initState of the myUserIcon widget to check the status of the globalUserDataProvider and rebuild as needed, but it seemed a little crazy

      Timer.periodic(Duration(seconds: 1), (Timer t) {


        if (mounted) {
          if (ref.read(globalUserDataProvider).userid > 0) {
            setState(() {

            });
          }

        }

      });

[rrousselGit]

Hello!

I do not understand your code. But what is globalUserDataProvider? Chances are the problem is in your provider, not the widget.

[mark8044]

Hello!

I do not understand your code. But what is globalUserDataProvider? Chances are the problem is in your provider, not the widget.

Hey!

Its a ChangeNotifierProvider

final globalUserDataProvider = ChangeNotifierProvider<GlobalUserData>((ref) {
  return GlobalUserData();
});


class GlobalUserData with ChangeNotifier{
  static var _userId = '0';
  static var _userAvatar = '';

  String get userid => _userId;
  String get useravatar => _userAvatar;

  static setUserData(String a, String b) {
    _userId = a;
    _userAvatar = b;
  }

}

I thought the problem might be that I am not doing a notifyListeners() call inside my setUserData that is the problem right?

As some background I am setting this data from a void Function that is not in my widget tree and inside that void function I am setting the user data: GlobalUserData.setUserData(_newuserid, _newuseravatar);. In order for that to work I had to make setUserData to static for it to work. Passing ref to that void function will be impossible since it is called from many different places and will be too hard to try to pass it in so many places in my code.

But when I made that into a static then I am not allowed to use notifyListeners().

What is interesting about all this is going back to my first post, the ref.watch(globalUserDataProvider).userid still seems to work in my floatingActionButton and does immediately update with new information while It does not update in the AppBar. All on the same screen

[rrousselGit]

It's quite likely that the lack of a notifyListeners is the issue, yes.

As for why you were not able to call notifyListeners, chances are you're trying to modify the state while widgets are building, which is not allowed. You may need to use addPostFrameCallback

[mark8044]

So when I try to put NotifyListeners() into my static method I get the following error ==>

error: Instance members can't be accessed from a static method. (instance_member_access_from_static ...)

But if I change it so its not static anymore then I cannot use GlobalUserData.setUserData(_newuserid, _newuseravatar);from my void function.

I get this error:

error: Instance member 'setUserData' can't be accessed using static access. (static_access_to_instance_member...)

Its a catch-22 :)

[rrousselGit]

You can't call methods like that.

You should obtain the instance of GlobalUserData (likely using ref.read(provider)) then call the method.