raj

Command Palette

Search for a command to run...

Complete Guide to Flutter SDK and Firebase Setup for Your Project

Complete Guide to Flutter SDK and Firebase Setup for Your Project

A comprehensive guide on installing Flutter SDK, setting up a new Flutter project, and integrating Firebase for Android and iOS applications. Step-by-step instructions include Google sign-in setup, required dependencies, and running the app in an emulator

Last updated on: Nov 2024 Monday


Flutter SDK installation

Before this install android studio. First you need to install flutter sdk on your system. Refer this

Verify your installation using

If it shows you the version without any error. you are good to go with next steps.

Create flutter project

You can use flutter sdk to create a project. Navigate to your projects folder (where you want to store your flutter project) from terminal. Then use the following command.

This will create a folder named firebase-authentication that has our initial setup for our flutter project.

Use above command to open our flutter project on Visual Studio Code.

After opening project in vs code. Use ctrl + ` to open terminal or View -> terminal. And use above command to run our flutter app

It will run in an emulator and the UI will be like the image above. Having a counter which increments on button press.

Firebase Setup:

Navigate to firebase console.

1. Click on create project

2. Give it a meaning full name and click on continue

3. You can keep this as it is and continue

4. Select your default account and click on create project.

That's it firebase project got created.

Now we need to add firebase to android and ios apps.

Adding firebase to Android app

1. I updated project name to KUCET. You should still see firebase-authentication. But all you need to do is click that android icon

2. Fill in the details and click on continue

3. Download google-services.json and store it in android/app/google-services.json

4. In android/settings.gradle add 'com.google.gms.google-services' in plugins. Plugins should look like this

5. In android/app/build.gradle add 'com.google.gms.google-services' in plugins. Plugins should look like this

6. Update minSdk to 23

Adding firebase to IOS app

  1. Similar to android, click on ios icon and create in a similar way
  2. Add the downloaded ‘GoogleService-info.plist’ file inside iOS>Runner folder.
  1. That's it for IOS setup


Install required dependencies

UI

Google Sign in code

Google Sign-out Code

Conclusion

With the Flutter SDK and Firebase fully integrated, you are now set up to build a cross-platform application that supports Firebase Authentication and other Firebase services. This setup provides a strong foundation for your Flutter project, ensuring you can easily scale and add functionalities, such as Google sign-in, in a seamless way. Continue exploring Flutter’s vast ecosystem and Firebase’s powerful backend services to add more features and build a robust application. Happy coding!

Stay Updated

Get the latest updates and insights directly to your inbox.