Flutter / Firebase project - Is `Unhandled Exception: Null check operator used on a null value` causing a blank screen?

Question

I'm working on a flutter project with firebase. I'm currently developing on a MacBook, using a simulated iPhone (just in case this is relevant). I am able to run my app, but when doing so it's just a white blank screen that never goes away, it may also be pertinent to know this happens on the Chrome, and simulated Android devices too. Looking in the run window, I can see I have an error showing the following:

Launching lib/main.dart on iPhone 13 in debug mode...
Running Xcode build...
Xcode build done.                                           28.4s
Debug service listening on ws://127.0.0.1:61474/fF4XR-ozS5s=/ws
Syncing files to device iPhone 13...
[VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: Null check operator used on a null value
#0      MethodChannel.binaryMessenger (package:flutter/src/services/platform_channel.dart:121:86)
#1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:146:36)
#2      MethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart:329:12)
#3      MethodChannel.invokeListMethod (package:flutter/src/services/platform_channel.dart:342:41)
#4      MethodChannelFirebase._initializeCore (package:firebase_core_platform_interface/src/method_channel/method_channel_firebase.dart:31:37)
#5      MethodChannelFirebase.initializeApp (package:firebase_core_platform_interface/src/method_channel/method_channel_firebase.dart:73:13)
#6      Firebase.initializeApp (package:firebase_core/src/firebase.dart:42:47)
#7      main (package:we_rise/main.dart:8:18)
#8      _runMainZoned.<anonymous closure>.<anonymous closure> (dart:ui/hooks.dart:145:25)
#9      _rootRun (dart:async/zon<…>

Since I'm still quite a novice, I can't quite decipher what has gone wrong, or what I'm looking at here. Please find below my main.dart file code:

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'database_config.dart';
import 'launch_page.dart';

void main() async {
  await Firebase.initializeApp(
    options: FirebaseOptions(
        apiKey: "foo",//"apiKey",
        appId: "foo",//"appId",
        messagingSenderId: "foo",//"messagingSenderId",
        projectId: "foo"),//"projectId"),
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown],
    );
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        fontFamily: 'BookmanOldStyle',
      ),
      home: LaunchPage(),
    );
  }
}

I hope this is useful. I truly do not understand why it's presenting me with a blank white screen when the app loads. I also read this answer , but I don't think I've used a null check operator in my code. Any help, advice, and criticism is appreciated.

EDIT: ADDED FLUTTER DOCTOR OUTPUT

flutter doctor output:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 12.0.1 21A559 darwin-arm, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] Connected device (2 available)

• No issues found!

flutter doctor -v output:

flutter doctor -v
[✓] Flutter (Channel stable, 2.5.3, on macOS 12.0.1 21A559 darwin-arm, locale en-GB)
    • Flutter version 2.5.3 at /Users/me/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (3 months ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/me/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.2.1, Build version 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] Connected device (2 available)
    • iPhone 13 (mobile) • C0D4EC95-07AF-46AB-A35E-F2B9F4437875 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 97.0.4692.71

• No issues found!

Answer 1

I think one of these should work.

1. Make sure you have initialized firebase properly ie right steps taken to integrate firebase with your project.

2. Add a name in the Firebase.initializeApp-

` await Firebase.initializeApp(

name: "SecondaryApp",//**Add this line**
options: FirebaseOptions(
    apiKey: "foo",//"apiKey",
    appId: "foo",//"appId",
    messagingSenderId: "foo",//"messagingSenderId",
    projectId: "foo"),

);`

Answer 2

Can you show 'database_config.dart' file, also no need to include firebase options for mobile as they are already included in json files.

Answer 3

You should add the

WidgetsFlutterBinding.ensureInitialized()

to the main function before Firebase initialization.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: FirebaseOptions(
        apiKey: "foo",//"apiKey",
        appId: "foo",//"appId",
        messagingSenderId: "foo",//"messagingSenderId",
        projectId: "foo"),//"projectId"),
  );
  await DatabaseConfig.initFirebase();
  runApp(MyApp());
}

Answer 4

For good measure, try a "flutter upgrade", since 2.5.3 is no longer the latest stable version, they're on 2.8.1 now. Then make sure you followed all of the instructions (to the letter) under each of the platform setup sections listed here.

If you've had to run "flutter clean" at any point or deleted your build folders, make sure you check them for the required includes as specified in that link above. I saw in the original post you said that flutterfire was not working on any of your platforms, which to me indicates that the library might not be fully configured under the build folders for each platform.

Answer 5

To all those who come across this issue, what worked for me was creating a new project on the Windows version (I'm using android studio) and remaking the program on there, you can even copy and paste for the most part.

It seems to me that the main issue was that I do not own an iPhone while developing on MacOS, and consequently, I was unable to run this while it's linked to my developer profile.