如何在 Flutter 应用程序加载时显示一些加载屏幕或启动画面

Question

I have been working on an app recently. I want to check if the user is logged in and is verified when my app loads up. So I created a Wrapper class to check if the user is logged in and is verified. Then accordingly I would show them either login screen or home screen.

I have assigned home : Wrapper(), in Main.dart .

After that I have wrapper class as

class Wrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final user = Provider.of<User>(context);

    // checking if there is user and the user is verified
    bool _isAuth() { 
      if (user != null && user.isVerified) {
        return true;
      }
      return false;
    }

    return _isAuth() ? MainScreen() : Authenticate();
  }
}

This works fine but the problem is it first flashes the login page and then takes me to the homepage if the user is logged in and is verified but it just works fine if the user is not logged in see gif image here

Answer 1

It probably shows the login page because of the way your logic is being handled. you should do this in initState instead of the build method. There are two ways to do this you can either use your wrapper as redirection class or use the build method like you're already doing to toggle the view.

First Method (uses redirection)

class Wrapper extends StatefulWidget {
  @override
  _WrapperState createState() => _WrapperState();
}

class _WrapperState extends State<Wrapper> {
  @override
  void initState() {
    super.initState();
    final user = Provider.of<User>(context, listen: false);
    var _isAuth = user != null && user.isVerified;
    Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => _isAuth ? MainScreen() : Authenticate()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator();
  }
}

Second Method (uses build method):

class Wrapper extends StatefulWidget {
  @override
  _WrapperState createState() => _WrapperState();
}

class _WrapperState extends State<Wrapper> {
  bool _isAuth = false;
  bool _isLoading = true;
  @override
  void initState() {
    super.initState();
    final user = Provider.of<User>(context, listen: false);
    setState(() {
      _isAuth = user != null && user.isVerified;
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return _isLoading
        ? CircularProgressIndicator()
        : _isAuth
            ? MainScreen()
            : Authenticate();
  }
}