Flutter：Token校验完成前显示Loader，优化应用启动体验

当前App启动时，已登录用户会先看到登录页再跳转到对应首页，原因是getUserData是异步操作，初始化时用户token为空，导致先渲染登录页，等异步校验完成后才更新状态跳转。要实现校验时显示Loader，校验完成后直接进入对应页面，按以下步骤修改：

1. 给UserProvider添加加载状态 #

在user_provider.dart中，新增isLoading字段跟踪Token校验状态：

class UserProvider extends ChangeNotifier {
  User _user = User(
    id: '',
    name: '',
    password: '',
    email: '',
    phone: 0,
    type: '',
    token: '',
  );
  bool _isLoading = true; // 新增加载状态标记

  User get user => _user;
  bool get isLoading => _isLoading; // 暴露加载状态

  void setUser(String userData) {
    _user = User.fromJson(jsonDecode(userData));
    _isLoading = false; // 获取用户信息后标记校验完成
    notifyListeners();
  }

  // 新增方法：手动标记校验完成（Token无效/为空时调用）
  void setLoadingComplete() {
    _isLoading = false;
    notifyListeners();
  }
}

2. 修改AuthService的getUserData方法 #

无论Token是否有效、是否出现异常，都要标记校验完成，避免Loader一直显示：

void getUserData(BuildContext context) async {
  try {
    var userProvider = Provider.of<UserProvider>(context, listen: false);
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String? token = prefs.getString('x-auth-token');

    if (token == null) {
      prefs.setString('x-auth-token', '');
      userProvider.setLoadingComplete(); // Token为空，直接结束校验
      return;
    }

    var tokenRes = await http.post(
      Uri.parse('$uri/tokenIsValid'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
        'x-auth-token': token!
      },
    );

    var response = jsonDecode(tokenRes.body);

    if (response == true) {
      http.Response userRes = await http.get(
        Uri.parse('$uri/'),
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
          'x-auth-token': token
        },
      );
      userProvider.setUser(userRes.body);
    } else {
      userProvider.setLoadingComplete(); // Token无效，结束校验
    }
  } catch (e) {
    showSnackBar(context, e.toString());
    Provider.of<UserProvider>(context, listen: false).setLoadingComplete(); // 异常时也结束校验
  }
}

3. 修改MyApp的渲染逻辑 #

根据加载状态决定显示Loader，还是对应页面：

class _MyAppState extends State<MyApp> {
  final AuthService authService = AuthService();

  @override
  void initState() {
    super.initState();
    authService.getUserData(context);
    // 无需手动调用setState，Provider会自动通知页面更新
  }

  @override
  Widget build(BuildContext context) {
    final userProvider = Provider.of<UserProvider>(context);
    
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'verdent',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: userProvider.isLoading
          ? const Loader() // 校验中显示加载组件
          : userProvider.user.token.isNotEmpty
              ? userProvider.user.type == 'user'
                  ? BottomNavScreen()
                  : const AdminScreen()
              : const login_a(),
    );
  }
}

效果说明 #

• App启动后直接显示Loader，直到Token校验完成
• Token有效时直接进入用户/管理员首页，无效或未登录时停留在登录页，彻底解决闪屏问题

内容的提问来源于stack exchange，提问作者Luffy