Flutter Firebase config

README.md

Configure Flutter IOS and Android app with Firebase

This Gist hopes to document my efforts to try and get past the Firebase Setup Step of the Fireship.io Flutter course and to understand Flutter and Fireship

From Step 3 of CodeLab Firebase get to know Flutter

Prerequisites

See also Firebase docs here

• firebase command line tool
• Have created a Firebase project
• Be logged in from the command line

1. Install dependencies

flutter pub add firebase_core 
flutter pub add firebase_auth
flutter pub add cloud_firestore
flutter pub add provider

2. Install flutterfire

dart pub global activate flutterfire_cli

3. Configure IOS and Android apps

flutterfire configure

This should add all the files and configs needed for the course:

	android/app/google-services.json
	android/app/src/main/java/
	ios/firebase_app_id_file.json
	lib/firebase_options.dart

a. Android: Set minSdkVersion

Add the following to the file ./android/app/build.gradle

android {                                                                                                                   
   defaultConfig {                                                                                                        
     minSdkVersion 19                                                                                                       
   }                                                                                                                       }
}

b. IOS: The .plist file

• From the FireStore Project settings, download the IOS GoogleService-Info.plist file.
• Open your Flutter Project ./ios directory in Xcode
• Copy GoogleService-Info.plist to the ./Runner directory
• A dialog will appear, make sure Copy items if needed is selected and press Finish

c. IOS: Set the ios plaform

In ./ios/Podfile add or uncomment the following line and set the platform to 11.0 or whatever is appropriate.

platform :ios, '11.0'

d. Rerun configure

After making any app configuration changes it helps to run flutterfire configure just to be sure 😉

5. Run

flutter run

ios.md

Troubleshooting

Missing URL schemes

Example Error

[VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: PlatformException(google_sign_in, Your app is missing support for the following URL schemes: com.googleusercontent.apps.123456789012-vp3vjk8q0dlaug1oijkvif93knbe4a92, NSInvalidArgumentException, null)
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:607:7)
#1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:177:18)
<asynchronous suspension>
#2      MethodChannel.invokeMapMethod (package:flutter/src/services/platform_channel.dart:377:43)
<asynchronous suspension>
#3      GoogleSignIn._callMethod (package:google_sign_in/google_sign_in.dart:247:30)
<asynchronous suspension>
#4      GoogleSignIn.signIn.isCanceled (package:google_sign_in/google_sign_in.dart:377:5)
<asynchronous suspension>
Lost connection to device.

Resolution outlined in Google documentation that you need to add the URL Reversed ClientID into the ios project via Xcode.

video demo

No idea why or what this is for the moment. Which is frustrating

start_main.dart

import 'package:flutter/material.dart';

// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(App());
}

/// We are using a StatefulWidget such that we only create the [Future] once,
/// no matter how many times our widget rebuild.
/// If we used a [StatelessWidget], in the event where [App] is rebuilt, that
/// would re-initialize FlutterFire and make our application re-enter loading state,
/// which is undesired.
class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  // Create the initialization Future outside of `build`:
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  /// The future is part of the state of our widget. We should not call `initializeApp`
  /// directly inside [build].
  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire:
      future: _initialization,
      builder: (context, snapshot) {
        // Check for errors
        if (snapshot.hasError) {
          return const Text('error', textDirection: TextDirection.ltr);
        }

        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          return const MaterialApp();
        }

        // Otherwise, show something whilst waiting for initialization to complete
        return const Text(
          'loading',
          textDirection: TextDirection.ltr,
        );
      },
    );
  }
}