Firebase ML Kit in Flutter — Part 1
Firebase is basically a mobile and web application development platform used to help in building high-quality apps.
Flutter is basically a mobile application development framework used to build apps for both Android and iOS from a single codebase.
Firebase provides a variety of products such as realtime-database, cloud storage, ML Kit, etc. and we can integrate them in Android, iOS and Flutter application. So in this series, I will cover how to integrate Firebase ML Kit in your Flutter application. But first of all, let’s see how to setup Firebase in your Flutter app (for both Android and iOS).
Firebase Setup:
- Create a new project in Firebase console.
2) After your project is ready, the following screen will appear in the console, if you want to setup firebase for your Android app then click on Android icon else click on iOS icon for the iOS application. In this blog, we will set up for both platforms.
In order to add firebase to your project, you first need to create a new flutter application. Open your terminal and copy the following command for creating a new flutter project. Here “mlkit_demo” is the name of a project.
Setup for Android app :
- After clicking on Android icon in firebase console, you will see the following screen, In order to add Firebase in your Android app, you will need app’s package name and SHA-1 certificate.
- For app’s package name, open your flutter application and inside this go to “android/app/src/AndroidManifest.xml”.
- For SHA-1 certificate, copy the following command. After writing this command it will ask for the keystore password, the password is: “android”
- After registering your app with firebase, download “google-services.json” file and copy this file inside the “android/app” directory.
- Now, add some Google services and firebase dependencies to your Android app.
That’s it for Android. Now we’ll set up for iOS app.
Setup for iOS app :
- After clicking on the iOS icon in the console, you will see the following screen. In order to add Firebase in your iOS app, you will need iOS bundle ID, in case of iOS, it doesn’t matter that you have to write only the app’s package name instead you can give any name to it. For this project, I am giving it as “mlkit.demo”.
- After registering your app with firebase, download “GoogleService-Info.plist” file and copy this file inside “ios/Runner” directory.
That’s it for iOS as well, Now I will add some packages to our flutter app that we created earlier in this blog.
Open “pubspec.yaml” file from your flutter app and add the following package inside it. After adding this, get your packages.
firebase_ml_vision:That’s it from this blog, in the next part of the series I will show you some of the exciting features of Firebase ML Kit.
I got something wrong? Mention it in the comments. I would love to improve.
If you learnt even a thing or two, clap your hands 👏 as many times as you can to show your support
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
