如何让 streambuilder 等待？

Question

I am build Flutter app with Firebase login but have issue with checking login status. On startup app must check if user logged in or not so it can show correct page. If logged in show homepage (different for different user role). If not, show login page.

I am use StreamBuilder in RootPage of app for this but problem is app must first check user info with Firestore db so it know what type of user is logged in and then can route to correct page. Problem is I no find way to make StreamBuilder wait for this function to check user info before move on. So the conditionals which operate on the values returned by function are not evaluate correctly. Here is code:

    body: StreamBuilder<FirebaseUser>(
      stream: _auth.onAuthStateChanged,
      builder: (BuildContext context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return new SplashScreen();
        }
        if (snapshot.hasData && getUserDetailsComplete == true) {
          _getUserDetails();

          if (isAdmin == true) {
            return new AdminScreen();
          } else if (isAdmin == false) {
            return new HomeScreen();
          }
        } else {
          return new RootPage();
        }
      },
    ),
  );
}

You see I have make workaround for now by: 1. Return RootPage in else statement so it loop until one of conditionals is satisfied and 2. Set boolean to true when function _getUserDetails is complete and add to conditional so widget know when function is completed. But this make app startup slow and not good style.

Anyone know better way to do?

Answer 1

you can use .then and .getIdToken for user detail in token and claims

Map<dynamic, dynamic> claims = {}; 
Auth.onAuthStateChanged.map((firebaseUser) {
  firebaseUser
      .getIdToken()
      .then((idTokenResult) => {
            if (idTokenResult.claims != null)
              {claims = idTokenResult.claims}
          })
      .catchError((e) => {print(e)});

more info about use custom claims for access control: firebase Doc

Answer 2

You can use a StatefulWidget. In the state of your widget, include a Widget object. In initState , you can store a placeholder Widget (a CircularProgressINnc, or something), and call a function that does some checking in Firebase. Make sure this function is async , since it does networking, which has to be done on a separate thread. At the end of this function, just call setState and replace the placeholder widget with a widget of choice. It would look something like this:

class MyScreen extends StatefulWidget {

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

class _MyScreenState extends State<MyScreen> {
  Widget _screen;

  @override
  void initState() {
    _screen = CircularProgressIndicator();

    _doSomeFirebaseChecking();
  }

  void _doSomeFirebaseChecking() async {
    // Add your code that performs checks at Firebase here.

    // Then use setState to update the widget to a screen of choice.
    setState(() {
      if (isAdmin == true) {
        _screen = AdminScreen();
      } else if (isAdmin == false) {
        _screen = HomeScreen();
      }
    });
  }
}

In a similar application I wrote, I had to build widgets in a screen based on the content of some web API. I used a method similar to this, and it works like a charm.

I hope this helps!