Skip to content

Instantly share code, notes, and snippets.

@rujmah

rujmah/README.md

Last active May 22, 2022 17:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rujmah/896965f2545f78d00c5c25f807e17e74 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rujmah/896965f2545f78d00c5c25f807e17e74 to your computer and use it in GitHub Desktop.
Download ZIP
Flutter Firebase config
Raw
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
Raw
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

Raw
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,
);
},
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment