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!

Solution 1

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.

Solution 2

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

Solution 3

I think one of these should work.

1. Make sure you have initialized firebase properly i.e. 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"),

);`

Comments

[Diwyansh]

Has your issue resolved with the below answer?

[Alex]

@Diwyansh not yet, it now loads a blank screen, crashes, and opens a dialogue box in MacOS which gives the error Runner quit unexpectedly

[Alexey Inkin]

Please edit your question to include the output of flutter doctor command.

[Alex]

@AlexeyInkin all done

[Alexey Inkin]

1) Try upgrading to the latest stable Flutter which is 2.8.1 at the moment. 2) Ensure you use the latest Firebase, check each firebase package from pubspec.yaml. 3) Double-check if you have a new exception after adding WidgetsFlutterBinding.ensureInitialized() on all platforms available to you. Update your post if the exception has changed.

[Alex]

@AlexeyInkin The issue remains the same unfortunately

[Alex]

It now loads a blank screen, crashes, and opens a dialogue box in MacOS which gives the error Runner quit unexpectedly

[Alex]

Following this steps outputs the following error in the run terminal: ``` Failed to send request: {"jsonrpc":"2.0","id":"20","method":"getObject","params":{"i‌​solateId":"isolates/‌​1668629121630887","o‌​bjectId":"libraries/‌​@560171358"}} ```

[Pranav]

See if rerunning helps. Source- stackoverflow.com/questions/54079152/…

[Pranav]

@Alex is the screen still blank?

[Alex]

Unfortunately, this has not resolved the issue, it now shows the blank screen very briefly, before then crashing and showing the error still. This was after following the steps mentioned on the answer you linked.

[Pranav]

Could you tell me what await DatabaseConfig.initFirebase(); is used for?

[Alex]

that's my bad, that line should have been removed, it's the Firebase.initializeApp(...); function, but it's in a separate .dart file for my own clarity, for the sake of the minimal reproducable example I meant to remove it, I'll fix this now.

[Pranav]

After removing that line and adding the name to Firebase.initializeApp(...) could you check if this problem occurs only on iOS device or not. Is the code giving the same problem for physical iOS and Android devices?

[Burhanuddin Rashid]

@Alex Can you share the stack trace of the MacOS error ?