Flutter Todo应用重启加载时出现蓝色小方块问题求助

我的Flutter Todo应用在关闭重启加载时，界面会先出现一个蓝色小方块。已在main.dart中排查调试但未找到原因。应用启动后通过AuthenticationChecker校验用户认证状态，未认证跳转至LoginScreen，已认证则跳转至HomePageScreen，该问题在模拟器和真机上均会复现。

我的main.dart代码 #

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:todo_app/firebase_options.dart';
import 'package:todo_app/routes/router.dart';
import 'package:todo_app/services/auth_checker.dart';
import 'package:sizer/sizer.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(
    fileName: '.env',
  );
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // ** This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'To Do App',
            theme: ThemeData.light(),
            onGenerateRoute: RouteManager.generateRoute,
            initialRoute: '/checkAuthentication',
            home: const AuthenticationChecker());
      },
    );
  }
}

排查与解决思路 #

1. 蓝色小方块的本质：这个蓝色方块通常是Flutter应用启动时的默认Scaffold背景，或是AuthenticationChecker未处理异步加载状态导致的——ThemeData.light()的默认primarySwatch为蓝色，当页面无自定义背景时就会显示这个颜色。

2. 修复AuthenticationChecker的加载状态：
   检查AuthenticationChecker的实现，确保在异步校验用户状态的过程中，返回自定义加载视图，替换默认的蓝色背景。示例修改如下：

   class AuthenticationChecker extends StatelessWidget {
     const AuthenticationChecker({super.key});
   
     @override
     Widget build(BuildContext context) {
       return StreamBuilder<User?>(
         stream: FirebaseAuth.instance.authStateChanges(),
         builder: (context, snapshot) {
           // 加载状态时显示自定义闪屏
           if (snapshot.connectionState == ConnectionState.waiting) {
             return Scaffold(
               backgroundColor: Colors.white, // 自定义背景色
               body: Center(
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     // 可添加应用logo
                     Image.asset('assets/app_logo.png'),
                     const SizedBox(height: 20),
                     const CircularProgressIndicator(color: Colors.grey),
                   ],
                 ),
               ),
             );
           }
           // 校验完成后的路由跳转逻辑
           return snapshot.hasData ? const HomePageScreen() : const LoginScreen();
         },
       );
     }
   }
   

3. 修正MaterialApp的路由冲突：
   当前MaterialApp同时设置了initialRoute和home，这会导致路由逻辑冲突，建议只保留其中一个。比如移除home参数，确保RouteManager中正确配置/checkAuthentication路由指向AuthenticationChecker。

4. 优化主题配置：
   若不想修改AuthenticationChecker，可以直接在ThemeData中修改默认背景色，避免蓝色背景出现：

   theme: ThemeData.light().copyWith(
     scaffoldBackgroundColor: Colors.white,
   ),
   

内容的提问来源于stack exchange，提问作者jpg.hue