I am trying to get my floating action button to display a red dot if there's a new request notification coming from a stream linked to Firebase. However, even when my stream indicates that the notifications['requests'] is true, the floating action button still does not build the red dot as expected. I know when a stream has a changed value, the widgets within Streambuilder gets rebuilt. How do we extend this to the floating action button which isn't within the StreamBuilder? I tried calling WidgetsBinding.instance! .addPostFrameCallback((_) => setState(() { })); within the else statement (at the end) of the builder parameter of StreamBuilder which worked but this call ended up making the buttons etc. of my Requests() widget unclickable. Any suggestions is appreciated!

class RequestsScreen extends StatefulWidget {
  @override
  State<RequestsScreen> createState() =>
      _RequestsScreenState();
}

class _RequestsScreenState extends State<RequestsScreen> {
  MyNotifications currentNotifications = new MyNotifications(
      requests: false,);
  late Stream myStream;

  @override
  void initState() {
    super.initState();
    myStream = rtdb.child('notifications').onValue;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: myFloatingActionButton(context),
      body: StreamBuilder<dynamic>(
          stream: myStream,
          builder: (context, snapshot) {
            if (snapshot.hasData == false ||
                snapshot.data.snapshot.value == null) {
              return Container(
                  color: Colors.white, child: pageLoading(context));
            } else {
              final notifications =
                  Map<String, dynamic>.from(snapshot.data.snapshot.value);
              currentNotifications.requests =
                  notifications['requests'] ?? false;
            }
            return Requests();
          }),
    );
  }

  Widget myFloatingActionButton(BuildContext context) {
    return Stack(
      children: [
        FloatingActionButton(
                     child: Icon(Icons.group_rounded),
                       onPressed: () async {}),
        currentNotifications.requests
            ? Positioned(
                top: 2,
                right: 2,
                child: Icon(Icons.brightness_1_rounded,
                    size: 14, color: Colors.red),
              )
            : Positioned(
                top: 2,
                right: 2,
                child: Icon(Icons.brightness_1_rounded,
                    size: 14, color: Colors.transparent),
              )
      ],
    );
  }
}

CodePudding user response：

I had a a problem lake that a times ago and my suggestion is to use

ValueListenableBuilder

i don't know if is more efficient but in may case is working perfectly'.