Connect your flutter web app to firebase; Ep 1

PAUL
2 min readOct 8, 2020

--

Hello, Am Paul from Flutter Fairy, am gonna show you how to connect you flutter web app to firebase it quite simple and straightforward. Quick thing: Install flutter…

In these article I will work you through connecting your flutter web app to firebase. And making your first note app with flutter web and firebase as your backend…
So lets get started.

First thing, Install flutter and dive over to the dev, master or beta channel… Then add web support follow these step here

If you re done adding bravo!!!

Now visit https://console.firebase.google.com/
and create your firebase project.
following these steps.

Add your project name; Mine is flutter-web-note-app
Click Continue…
Click on web Icon to add support for web on your firebase console.
Add a nickname or leave it blank… click Register app
Now Copy and paste these scripts into the bottom of your <body> tag, In the index.html file on the web folder…
Here
Add these packages to your pubspec.yaml file… And run flutter pub get

Now run your app; open terminal flutter run -d chrome

Congratulations!!!

Now lets make these more interesting, lets write,read from firestore database…

Enable firestore database…

https://raw.githubusercontent.com/hello-paulvin/flutter-web-note-app/master/lib/main.dart

Copy the code paste on your main.dart file…

Now run your app…

Clone the github project here https://github.com/hello-paulvin/flutter-web-note-app

--

--

PAUL
PAUL

Written by PAUL

Mobile Engineer | Flutter | TechTalks | Guitar

No responses yet