Stack using BLoC pattern in flutter

Question

I have a login page which is functional. I'm using the BLoC pattern in flutter. What I want to achieve is toggling a loading screen overlay which I have code for using a stack.

Below is my build method

    _loginBloc.loginController.stream.listen((event)=>{
      Navigator.of(context).push(MaterialPageRoute(builder: (context) => HomePage()))
    });

    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      appBar: buildAppBar(context, "", isSearchView: false, showHome: false, elevation: 0.0),
      body: StreamBuilder<String>(
          stream: _loginBloc.processingController.stream,
          builder: (context, processingSnapshot) {
            return Stack(
              children: <Widget>[
                SingleChildScrollView(...),
                if (processingSnapshot.hasData){  // <-- This is giving me an error
                  return Text("Loading overlay goes here");
                }
              ],
            );
          }
      )
    );

Answer 1

You cant do this inside widget

if (processingSnapshot.hasData){  // <-- This is giving me an error
   return Text("Loading overlay goes here");
}

try to move that loading widget like that

builder: (context, processingSnapshot) {
  if (!processingSnapshot.hasData){  // <-- This is giving me an error
     return Text("Loading overlay goes here");
  }
  return Stack(
    children: <Widget>[
      SingleChildScrollView(...),
    ],
  );
}

Edit: Also we need to see the error.

Answer 2

Try this:

builder: (BuildContext context, processingSnapshot) {
        switch (processingSnapshot.connectionState) {
          case ConnectionState.active:
          case ConnectionState.done:
            if (processingSnapshot.hasData) {
              return Home(firebaseUser: snapshot.data);
            } else {
              return CircularProgressIndicator();
            }
            break;
          default:
            return CircularProgressIndicator();
        }
      },

Answer 3

I figured it out. The fix was to wrap the widget in a visibility widget instead of having it in an if statement.

The code looks like this

return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      appBar: buildAppBar(context, "", isSearchView: false, showHome: false, elevation: 0.0),
      body: StreamBuilder<String>(
          stream: _loginBloc.processingController.stream,
          builder: (context, processingSnapshot) {
            return Stack(
              children: <Widget>[
                ListView(...),
                Visibility(
                  visible: processingSnapshot.hasData,
                  child: FullPageLoading(),
                )
              ],
            );
          }
      )
    );

This way, the visibility of the overlay screen is toggled based on whether the stream has a valid value (any string) or not.

FullPageLoading has an opacity as well so I'm able to still see the form in the background which is why I opted to use a stack