Home > other >  Flutter app stays white screened on android but works perfect on web
Flutter app stays white screened on android but works perfect on web

Time:07-26

I am using Firebase authentication to make email password authentication. I tried flutter clean and then flutter run which still did not work.

CLI Logs

flutter run
Running "flutter pub get" in mobile_auth_test...                 2,857ms
Using hardware rendering with device Android SDK built for x86. If you notice graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib\main.dart on Android SDK built for x86 in debug mode...
Note: C:\[REDACTED]\Documents\flutter\.pub-cache\hosted\pub.dartlang.org\firebase_auth-1.4.1\android\src\main\java\io\flutter\plugins\firebase\auth\FlutterFirebaseAuthPlugin.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Running Gradle task 'assembleDebug'...    
√  Built build\app\outputs\flutter-apk\app-debug.apk.
Installing build\app\outputs\flutter-apk\app.apk...              2,370ms
E/flutter ( 4005): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: Binding has not yet been initialized.
E/flutter ( 4005): The "instance" getter on the ServicesBinding binding mixin is only available once that binding has been initialized.
E/flutter ( 4005): Typically, this is done by calling "WidgetsFlutterBinding.ensureInitialized()" or "runApp()" (the latter calls the former). Typically this call is done in the "void main()" method. The "ensureInitialized" method is idempotent; calling it multiple times is not harmful. After calling that method, the "instance" getter will return the binding.
E/flutter ( 4005): In a test, one can call "TestWidgetsFlutterBinding.ensureInitialized()" as the first line in the test's "main()" method to initialize the binding.
E/flutter ( 4005): If ServicesBinding is a custom binding mixin, there must also be a custom binding class, like WidgetsFlutterBinding, but that mixes in the selected binding, and that is the class that must be constructed before using the "instance" getter.
E/flutter ( 4005): #0      BindingBase.checkInstance.<anonymous closure> (package:flutter/src/foundation/binding.dart:281:9)
E/flutter ( 4005): #1      BindingBase.checkInstance (package:flutter/src/foundation/binding.dart:363:6)
E/flutter ( 4005): #2      ServicesBinding.instance (package:flutter/src/services/binding.dart:48:54)
E/flutter ( 4005): #3      MethodChannel.binaryMessenger (package:flutter/src/services/platform_channel.dart:132:78)
E/flutter ( 4005): #4      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:157:36)
E/flutter ( 4005): #5      MethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart:340:12)
E/flutter ( 4005): #6      MethodChannel.invokeListMethod (package:flutter/src/services/platform_channel.dart:353:41)
E/flutter ( 4005): #7      MethodChannelFirebase._initializeCore (package:firebase_core_platform_interface/src/method_channel/method_channel_firebase.dart:31:37)
E/flutter ( 4005): #8      MethodChannelFirebase.initializeApp (package:firebase_core_platform_interface/src/method_channel/method_channel_firebase.dart:73:13)
E/flutter ( 4005): #9      Firebase.initializeApp (package:firebase_core/src/firebase.dart:40:47)
E/flutter ( 4005): #10     main (package:fbla_lettering_point_app/main.dart:17:18)
E/flutter ( 4005): #11     _runMainZoned.<anonymous closure>.<anonymous closure> (dart:ui/hooks.dart:130:25)
E/flutter ( 4005): #12     _rootRun (dart:async/zone.dart:1426:13)
E/flutter ( 4005): #13     _CustomZone.run (dart:async/zone.dart:1328:19)
E/flutter ( 4005): #14     _runZoned (dart:async/zone.dart:1861:10)
E/flutter ( 4005): #15     runZonedGuarded (dart:async/zone.dart:1849:12)
E/flutter ( 4005): #16     _runMainZoned.<anonymous closure> (dart:ui/hooks.dart:126:5)
E/flutter ( 4005): #17     _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:297:19)
E/flutter ( 4005): #18     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)
E/flutter ( 4005):
Syncing files to device Android SDK built for x86...               375ms

Flutter run key commands.
r Hot reload.
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

 Running with sound null safety 

An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:58502/ze-cZAhsu4s=                      

The screen looks like this(it doesnt show the app, while it shows the app perfectly on the web version):

enter image description here enter image description here

Here is the main.dart

// Flutter widgets
import 'package:flutter/material.dart';

// Pages
import 'package:fbla_lettering_point_app/Pages/timeline.dart';
import 'package:fbla_lettering_point_app/Pages/signup.dart';
import 'package:fbla_lettering_point_app/Pages/login.dart';
import 'package:fbla_lettering_point_app/Pages/profile.dart';
import 'package:fbla_lettering_point_app/Pages/verify_email_page.dart';

// DB/Auth
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:firebase_auth/firebase_auth.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FBLA Lettering Points',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: <String, WidgetBuilder>{
        '/signin': (context) => const SignInPage(),
        '/signup': (context) => const SignUpPage(),
        '/timeline': (context) =>
            const Timeline(title: "FBLA Lettering Points"),
        '/profile': (context) => const Profile(),
        '/verify': (context) => const VerifyEmailPage(),
      },
      home: const SignInPage(),
    );
  }
}

I will also give the gradle files below:

android\build.gradle

buildscript {
    ext.kotlin_version = '1.6.10'
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.13'
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}   

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

android\settings.gradle

include ':app'

def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
def properties = new Properties()

assert localPropertiesFile.exists()
localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }

def flutterSdkPath = properties.getProperty("flutter.sdk")
assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"

android\app\build.gradle

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion flutter.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }

    sourceSets {
        main.java.srcDirs  = 'src/main/kotlin'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.fbla_lettering_point_app"
        minSdkVersion 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnabled true
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

apply plugin: 'com.android.application'

apply plugin: 'com.google.gms.google-services'

dependencies {
    implementation platform('com.google.firebase:firebase-bom:30.2.0')

    implementation 'com.google.firebase:firebase-analytics'

    implementation 'com.android.support:multidex:1.0.3'

    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

CodePudding user response:

you need to place WidgetsFlutterBinding.ensureInitialized() above firebase initialization. I have shared snippet below.

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

for more detailed explanation about WidgetsFlutterBinding.ensureInitialized() check here

  • Related