With Google Firebase, one of the most powerful and versatile serverless platforms available today, you can effortlessly add essential features such as user management, crash reporting, analytics, real-time data storage, and even machine learning to your mobile apps. To be able to work with the platform while using the Google Flutter framework, you'll need FlutterFire.
FlutterFire is a growing collection of official Flutter plugins for Firebase. In this tutorial, I'll show you how to use it to add three different Firebase services to a Flutter app.
Prerequisites
To follow this step-by-step tutorial, you'll need:
- Android Studio 3.1.3 or higher
- Google Flutter SDK 0.9.4 or higher
- Google Flutter plugin 29.0.1 or higher
- a Firebase account
- a device running Android API level 23 or higher
If you don't have the Flutter SDK or the Flutter plugin, learn how to install them both here:
1. Preparing a Google Flutter Project
Fire up Android Studio and create a new Flutter project. In the project creation wizard, make sure you choose the Flutter application option and associate a valid package name with it.
You can't use Firebase services in this project until you register it with the Firebase platform and link it to a Firebase project. Although you can do so manually using a browser, you can save a lot of time and effort by using Android Studio's Firebase Assistant instead, which automates most of the steps for you.
Start by opening the native Android project that's embedded inside your Flutter project by going to Tools > Flutter > Open for Editing in Android Studio. When prompted, make sure you open the project in a new window.
In the new window, go to Tools > Firebase to open the Firebase Assistant.
Then go to Analytics > Log an Analytics event. In the screen that opens next, press the Connect button.
You will now see a dialog prompting you to specify the name of your new Firebase project. Type in a name you prefer and press the Connect to Firebase button.
At this point, Firebase Assistant will automatically complete the registration process and add a file named google-services.json, which contains important configuration details, to your project.
To be able to read the JSON file, you'll need the Google Services plugin. So open the root-level build.gradle file and add the classpath of the plugin inside the dependencies section:
1 |
classpath 'com.google.gms:google-services:4.0.1' |
Next, activate the plugin by adding the following line at the end of the app-level build.gradle file:
1 |
apply plugin: 'com.google.gms.google-services' |
You can now close the new window and return to the Flutter project.
2. Adding Dependencies
FlutterFire has independent Google Flutter plugins for most Firebase services. To add the plugins as dependencies in your Flutter project, all you need to do is mention them under the dependencies key of the pubspec.yaml file.
The following code shows you how to add dependencies for latest versions of plugins associated with the Analytics, Cloud Firestore, and ML Kit services:
1 |
firebase_analytics: ^1.0.3 |
2 |
cloud_firestore: ^0.7.3 |
3 |
firebase_ml_vision: ^0.2.0+1 |
In this tutorial, you'll be creating an app that can scan QR codes and save the data they contain in a cloud database. As you may have guessed, you'll be using the ML Kit plugin as a QR code decoder and the Cloud Firestore plugin as an interface to the database.
To actually capture the QR codes, however, you'll need Image Picker, a plugin that allows you to interact with the camera. Here's how you can add it as another dependency:
1 |
image_picker: ^0.4.10 |
After adding the dependencies, go ahead and press the Packages get button to install all the plugins.
3. Using Firebase Analytics
Usually, you won't have to write any additional code to be able to use Firebase Analytics in your Flutter app. So long as the associated plugin is installed, your app will automatically report user data to Firebase. You can verify this by running your app right away and going to the Firebase console.
If you didn't encounter any configuration errors in the previous steps, you will be able to see events popping up in the StreamView panel of the Analytics dashboard.
4. Using Firebase ML Kit
Firebase ML Kit is a recently launched Firebase service that allows you to detect faces, scan barcodes, and perform optical character recognition operations on any image or video. Its FlutterFire plugin offers an API that's very intuitive and concise. Let us now use it to decode QR codes.
Start by creating a layout containing a button users can press to capture photos of QR codes. The following code shows you how to create a Material Design layout with a RaisedButton widget placed in the center:
1 |
void main() => runApp(new MaterialApp(home: new MyApp())); |
2 |
|
3 |
class MyApp extends StatelessWidget { |
4 |
@override
|
5 |
Widget build(BuildContext context) { |
6 |
return new Scaffold( |
7 |
body: new Center( |
8 |
child: new RaisedButton( |
9 |
onPressed: () { |
10 |
|
11 |
// More code here
|
12 |
|
13 |
},
|
14 |
child: new Text("Capture QR Code") |
15 |
)
|
16 |
)
|
17 |
);
|
18 |
}
|
19 |
}
|
If you run the app now, it will look like this:
Note that the button has an on-pressed event listener associated with it. Inside the listener, you can use the pickImage() method of the ImagePicker class to capture a photo. Because the method runs asynchronously, you must attach a listener to it in order to receive its result. The following code shows you how:
1 |
ImagePicker.pickImage(source: ImageSource.camera).then((photo) { |
2 |
// More code here
|
3 |
});
|
Once you have captured a photo, you can pass it to ML Kit's BarcodeDetector class to detect the QR codes it may contain. To get an instance of the class, use the barcodeDetector() method of the FirebaseVision class.
ML Kit supports many different types of barcodes. To make the detection process more efficient, you can use a BarcodeDetectorOptions object to specify the type of barcode you are interested in. Here's how you create a detector for QR codes only:
1 |
BarcodeDetector detector = |
2 |
FirebaseVision.instance.barcodeDetector( |
3 |
BarcodeDetectorOptions( |
4 |
barcodeFormats: BarcodeFormat.qrCode |
5 |
)
|
6 |
);
|
Because the detector cannot handle image files directly, you must convert your photo into a FirebaseVisionImage object using its fromFile() method. You can then pass the object to the detectInImage() method of the detector to get a list of barcodes detected. The method runs asynchronously, so you'll need to attach a listener to it.
1 |
detector
|
2 |
.detectInImage(FirebaseVisionImage.fromFile(photo)) |
3 |
.then((barcodes) { |
4 |
// More code here
|
5 |
});
|
Inside the listener, you'll have access to a list of Barcode objects. The rawValue field of each such object contains raw decoded data. For now, to keep things simple, let's use an AlertDialog widget to display the raw data present in the first item of the list.
The following code shows you how to create a simple AlertDialog widget having Text widgets for its title and contents, and a FlatButton widget that can be pressed to dismiss it:
1 |
if(barcodes.length > 0) { |
2 |
var barcode = barcodes[0]; // Pick first barcode |
3 |
|
4 |
// Create Alert Dialog
|
5 |
showDialog(context: context, builder: (context) { |
6 |
return new AlertDialog( |
7 |
title: new Text("QR Code Contents"), |
8 |
content: new Text(barcode.rawValue), // Show raw value |
9 |
actions: <Widget>[new FlatButton( |
10 |
onPressed: () { |
11 |
Navigator.of(context).pop(); |
12 |
},
|
13 |
child: new Text("OK") |
14 |
)],
|
15 |
);
|
16 |
});
|
17 |
}
|
You can run the app now and try scanning a few QR codes.
5. Using Cloud Firestore
Cloud Firestore is a NoSQL database you can use to store your app's data in the cloud. Its FlutterFire plugin offers classes that allow you to asynchronously perform CRUD operations on it.
Before you start using it, you must manually enable the Cloud Firestore service in the Firebase console. To do so, go to the Database section of the console and press the Create Database button.
When prompted to define the security rules of the database, choose the Start in test mode option. This mode allows you to start using the database immediately, but it's not very secure and is ideal for test purposes only.
Finally, press the Enable button to create the database.
Back in Android Studio, you can get a reference to the database by using the instance field of the Firestore class. Accordingly, add the following code to your stateless widget:
1 |
var myDatabase = Firestore.instance; |
While using Cloud Firestore, you must store all your data inside documents. Furthermore, each document must belong to a collection. To create or reference a collection, you must use the collection() method, which expects a string specifying the name of the collection.
Once you have access to a collection, you can call its add() method to add a document to it.
The following code, which you can add right before the call to the showDialog() function, shows you how to create a new document—one containing the QR code's raw value and a timestamp—and add it to a collection named qr_codes:
1 |
myDatabase.collection("qr_codes").add({ |
2 |
"raw_data": barcode.rawValue, |
3 |
"time": new DateTime.now().millisecondsSinceEpoch |
4 |
}).then((_) { |
5 |
print("One document added."); |
6 |
});
|
If you run the app again and scan a QR code with it, you will now be able to see the contents of the QR code in the Firebase console.
Conclusion
Services offered by the Firebase platform are indispensable while developing modern mobile apps. There are official Google Flutter plugins for almost all of those services. In this tutorial, you learned how to use three of them together to create a highly accurate QR code scanner app.
To learn more about Flutter and Firebase, do refer to the official documentation.
