为什么我在托管 Flutter 应用程序时出现灰屏？

Question

I've checked all the other answers about grey screen when hosting a web app but I have not found a solution for my problem yet. I have checked my code for errors, and fixed the ones that I had.

When I deploy my app, everything seems fine. The loginscreen appears and I can succesfully log in and get directed to my homescreen. But when I refresh my browser the screen turns grey and I have to deploy my app again to get it to work.

Hope somebody has some clue to what this can be?

Some further testing in Debugmode get me this error:

The following TypeErrorImpl was thrown building Builder: Unexpected null value. The relevant error-causing widget was: MaterialApp MaterialApp:file:///C:/Users//lib/main.dart:50:12

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences sharedpreference  = await SharedPreferences.getInstance();
  sharedpreference.getString('email');
  await Firebase.initializeApp( options: const FirebaseOptions(
    apiKey: "AI******YSpsnJ8",
    appId: "1:981*******50",
    messagingSenderId: "******",
    projectId: "tdfsfdf**",
  ),
  );
  if (kIsWeb) {
    print('Web');
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]
    ).then((_) => runApp(const MyApp()));
  } else {
    print('mobil');
    // NOT running on the web! You can check for additional platforms here.
    runApp(const MyApp());
}
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      title: 'Flutter Demo',
     home: FirebaseAuth.instance.currentUser == null
          ? const UserLoginPage()
          : const UserHomePage(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      initialRoute: UserLoginPage.id,
      routes:{
        UserLoginPage.id : (context) => const UserLoginPage(),
        AdminServicePage.id : (context) => const AdminServicePage(),
        AdminToolsPage.id : (context) => const AdminToolsPage(),
        AdminDeviationPage.id : (context) => const AdminDeviationPage(),
        AdminUsersPage.id : (context) => const AdminUsersPage(),
        UserHomePage.id : (context) => const UserHomePage(),
        UserToolListPage.id : (context) => const UserToolListPage(),
        WebHomePage.id : (context) => const WebHomePage(),
        WebOverviewPage.id : (context) => const WebOverviewPage(),
       
      },
      debugShowCheckedModeBanner: false,

    );
  }
}

Answer 1

Without code we can not be specific to tell where the problem is

However, If you are using some libraries / packages, make sure they are supported on web as well as they are supported on Android or Ios

If you're using firebase, make sure the project on the firebse console include web

Answer 2

If you're no longer running your app in debug mode or on a simulator you get gray screen instead or red, which is usually called by some error.

To debug, I would add catcher package to catch un-handle errors. Configure the package to either save locally as text file to review later or you can have it email as it happens or choose from other options.

Hope this helps!

Answer 3

You have to initialize Firebase before running main void so it have to look like that:

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 Firebase.initializeApp(
 options: FirebaseOptions(
     apiKey: Constants.apiKey,
     authDomain: Constants.authDomain,
     projectId: Constants.projectId,
     storageBucket: Constants.storageBucket,
     messagingSenderId: Constants.messagingSenderId,
     appId: Constants.appId,
     measurementId: Constants.measurementId),
 ).then((value) {
    runApp(const MyApp());
    setUrlStrategy(PathUrlStrategy());
 });
}