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

Question

我最近一直在开发一个应用程序。我想检查用户是否已登录并在我的应用程序加载时得到验证。所以我创建了一个 Wrapper 类来检查用户是否登录并通过验证。然后相应地我会向他们显示登录屏幕或主屏幕。

我在 Main.dart 中分配了 home : Wrapper()。

之后我将包装类作为

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();
  }
}

这工作正常，但问题是它首先闪烁登录页面，然后如果用户已登录并经过验证，它会将我带到主页，但如果用户未登录，它就可以正常工作see gif image here

Answer 1

由于处理逻辑的方式，它可能会显示登录页面。您应该在 initState 中执行此操作，而不是在 build 方法中执行此操作。有两种方法可以做到这一点，您可以将包装器用作重定向类，也可以使用 build 方法，就像您已经在做的那样来切换视图。

第一种方法（使用重定向）

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();
  }
}

第二种方法（使用构建方法）：

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();
  }
}