Hi Friends,

Hope you are all well. In this post let’s see how to upload files to firebase storage from your flutter apps.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

Let’s begin.

Code for this repo is available – here. (Leave a star to the repo if you found it helpful)

Now, just for a demonstration we’ll pick an image from the phone’s file system and try to upload it onto Firebase storage.

Since this is going to be a basic demo, I’ll remove the auth-check rule from Firebase storage (Not recommended).

Alright. I presume you already know how to configure firebase with your flutter app. If not then kindly watch this video once.

Now once you have done the configurations open up android -> build.gradle and add this snippet a the bottom of the file.

This is to fix a dependency error.

Now open pubspec.yaml and add the dependencies for firestore and image picker.

Now get back to main.dart. Add the code as shown below.

Here we are simply using the image_picker plugin to pick an image from the gallery and show it on our screen.

When you run the app you will see the below screen.

Tap on the FAB

Tap on allow to allow our app to access the gallery.

Choose an image. That’s it. You’ll see the image on the screen.

Alright. Now we have code to pick an image from our gallery. We need to upload this image to Firebase Storage right ?

Let’s add an upload button for that.

Open main.dart and add a button in our enableUpload() widget.

(Don’t forget to import firebase_storage as well).

I am simply creating a storage reference. (note that you can have directories in your firebase storage as any other file system and store your files under separate directories by choosing the path here in the reference).

Then I am simply uploading the file using putFile() method.

Now run the app and you’ll see the button.

Now tap on the upload button and open firebase storage in your firebase console. You should see the image uploaded there.

(It would be a better idea to add an alert/snackbar to show when the image upload is done).

That’s it guys. Now though I have just uploaded an image, you could upload files of any type into firebase storage.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

Hi Friends,

Hope you are all well. This is a sequel to my previous post here.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

I would highly recommend you read my previous post, else you won’t get along with the flow.

Let’s begin.

A screencast of this post

Code for this post is available – here.

We saw how to Write and Read data into a firestore collection in our previous post right ? Now let’s see how to update and delete documents present in your firestore collection.

Wait., before that let’s go ahead and introduce streams which will help us to reflect the changes occurring in the database on the screen in real-time.

Streams:

Now the simplest way to bring in streams into your application is to use a Stream Builder. A stream builder allows you to utilize a stream or rather the data arriving in your stream to be used in a widget.

Open dashboard.dart and modify it as shown below.

That is too much code. I totally agree., but on a second look, you would see that I have just added a Stream builder to our existing _carList widget and I am simply using a List View to dissect the individual snapshots obtained from the getData() method.

Also, note the onTap() and onLongPress() methods. On Tap we are opening an updateDialog() that is almost exactly similar to our addDialog(). From the dialog we are calling a updateData() method present in our services/crud.dart. The onLongPress() function again calls a deleteData() method present in services/crud.dart. I am also passing the documentID of the tapped document in both these methods as arguments since we want to manipulate only one particular document which we can directly pick from our firestore collection.

Now open up crud.dart and add the below code.

In the updateData() function I have the selectedDoc (which is nothing but the document ID) using which I pick out the document from my collection and simply update it with the new values.

In the deleteData() I do the same except that I delete it.

Now run the app and watch the real-time magic happen.

Once you login you’ll see the below screens.

And just tapping on a list item will…

Cool right.. just try long pressing on a list item as well.. (It would delete it). Also try adding a new item.

The interesting thing is, if you notice all the changes happening in the firestore collection would get reflected on the screen in real time.

That’s it guys. Now you know how to add, update, delete and access data from firestore. In our forthcoming posts we’ll see how to write queries to query for data in an efficient way.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

Hi Friends,

Hope you are all well. In this post let’s get into how to read and write data from a firestore collection.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

I presume most of you would already be familiar with firestore now. Firestore is nothing but a simple cloud storage system that stores (almost) all types of data in the forms of documents in simple scalable collections which can then be accessed, updated, deleted or modified in many ways.

Anyway, let’s continue with our app.

I presume by now you would already know how to configure firebase in your applications. If not then kindly watch this video once..

Let’s begin.

Code for this post is available – here. (Kindly leave a star to the repo)

I would highly recommend you to read the Flutter authentication article once which is available here.

Now create a couple of pages in your app as shown below.

Now open the main.dart and add the below code.

We are simply pushing the user to a dashboard page when he logs in. That’s it.

Open up loginpage.dart and add the below code in it.

We have already talked a lot about authentication in our previous posts. In this page we simply have code for authenticating a user.

But wait, Dude, is this all essential ? In your firebase console under database there’ll be a tab called Rules. Check it out.

As you could see here, we are allowing only authenticated users to read/write into our collections.

So we are putting an authentication system in place in our app. (If not, you could simply go ahead and remove this rule, which I wouldn’t recommend).

Alright, dude.. come on., get into the CRUD thing that you were talking about.

Writing data:

Open up dashboard.dart and add the below code.

Nothing fancy guys.. We are just using a couple of dialogs. In one of them we have 2 text fields which will be used to receive the user input and then we are going to be saving this data in our firestore collection.

Open up crud.dart and add the below code.

We are simply checking whether the user is logged in and then we are simply adding the data into the testcrud collection.

Now if you run the app you’ll see the below screens.

Add a car using the button on the top right

Cool right? So this is how you add data into your Firestore collection from your flutter apps.

Check your firestore collections as well.

Reading data:

Now that we have added some cars into our collection, let’s just see how to retrieve this data and throw it up on the screen as well.

Open crud.dart and modify it as shown below.

This getData function will now return a querysnapshot which is nothing but a set of documents.

We’ll now use this in our dashboard.dart

Open it up and modify it as shown below.

Whoa, that’s a lot of code. Nope., it isn’t; I have simply overriden the initState() function to make a call to the getData() function and then I am using the data obtained here in a List builder to show the data in a list.

Run the app and  you’ll see the below screen.

Nice right?

There we have seen how to read/write data into firestore from your flutter app.

We’ll see how to update this data, delete data and how to use a stream to reflect changes happening in the database in realtime in our next post.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

Hi Friends,

Hope you are all well. In this post let’s talk about phone authentication with firebase in your flutter apps. This post is again a sequel to my previous posts on authentication.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

To read my previous posts on different ways of authenticating a user into your app using the firebase authentication system, use the below links.

Authentication with email/password – Click here.

Authentication with Google – Click here.

Authentication with Facebook – Click here.

Authentication with Twitter – Click here.

Let’s begin.

A screencast of this post:

Code for this post is available –  here.

(Kindly leave a star to the repo. Thanks)

I believe you already know how to configure your flutter app to use firebase. If not kindly click here.

Open your pubspec.yaml file and add the below dependency.

Now, before we dive into the code.

Phone authentication generally has two steps.

Step 1: 

You enter a number and tap a button, the system sends a sms code to that specific number.

Step 2:

You enter the sms code into a specific input field and it verifies the code and authenticates you.

So, how are we going to achieve these two steps in firebase ?

Well, firebase supports phone Authentication. You just need to enable it and then you are done. It also provides an auto retrieval feature, i.e., in case you are entering the phone number of the device in which you are using the app, then it’ll automatically try to retrieve the code and use it to verify you.

In case you are using the app on a different device and using the mobile number of a different device then you would need to manually enter the sms code and then it will be verified.

Let’s handle both these scenarios in our code.

Now open up main.dart file and add the below code.

Whoa, whoa.. dude that’s too much code..

Let’s break this down.

1. We just have a text field in the middle of the screen and a button. When you enter the number and tap on verify it will call the verifyPhone() function.
2. This is where the number is verified.
   
   Future<void> verifyPhone() async { final PhoneCodeAutoRetrievalTimeout autoRetrieve = (String verId) { this.verificationId = verId; }; final PhoneCodeSent smsCodeSent = (String verId, [int forceCodeResend]) { this.verificationId = verId; smsCodeDialog(context).then((value) { print('Signed in'); }); }; final PhoneVerificationCompleted verifiedSuccess = (FirebaseUser user) { print('verified'); }; final PhoneVerificationFailed veriFailed = (AuthException exception) { print('${exception.message}'); }; await FirebaseAuth.instance.verifyPhoneNumber( phoneNumber: this.phoneNo, codeAutoRetrievalTimeout: autoRetrieve, codeSent: smsCodeSent, timeout: const Duration(seconds: 5), verificationCompleted: verifiedSuccess, verificationFailed: veriFailed); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   Future<void> verifyPhone() async {     final PhoneCodeAutoRetrievalTimeout autoRetrieve = (String verId) {       this.verificationId = verId;     };       final PhoneCodeSent smsCodeSent = (String verId, [int forceCodeResend]) {       this.verificationId = verId;       smsCodeDialog(context).then((value) {         print('Signed in');       });     };       final PhoneVerificationCompleted verifiedSuccess = (FirebaseUser user) {       print('verified');     };       final PhoneVerificationFailed veriFailed = (AuthException exception) {       print('${exception.message}');     };       await FirebaseAuth.instance.verifyPhoneNumber(         phoneNumber: this.phoneNo,         codeAutoRetrievalTimeout: autoRetrieve,         codeSent: smsCodeSent,         timeout: const Duration(seconds: 5),         verificationCompleted: verifiedSuccess,         verificationFailed: veriFailed);   }

   
   In the above snippet, we are simply using a verifyPhoneNumber() method to verify the given number., i.e., send a sms code to the number. If the code is auto retrieved then the verifiedSuccess() function is called. Note that we have a firebase user as it’s argument.

   Wait, notice the smsCodeSent() function. This is the one that gets triggered as soon as the verification code is sent. We are opening up a dialog with a textfield and a button as shown below.

   Future<bool> smsCodeDialog(BuildContext context) { return showDialog( context: context, barrierDismissible: false, builder: (BuildContext context) { return new AlertDialog( title: Text('Enter sms Code'), content: TextField( onChanged: (value) { this.smsCode = value; }, ), contentPadding: EdgeInsets.all(10.0), actions: <Widget>[ new FlatButton( child: Text('Done'), onPressed: () { FirebaseAuth.instance.currentUser().then((user) { if (user != null) { Navigator.of(context).pop(); Navigator.of(context).pushReplacementNamed('/homepage'); } else { Navigator.of(context).pop(); signIn(); } }); }, ) ], ); }); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

   Future<bool> smsCodeDialog(BuildContext context) {     return showDialog(         context: context,         barrierDismissible: false,         builder: (BuildContext context) {           return new AlertDialog(             title: Text('Enter sms Code'),             content: TextField(               onChanged: (value) {                 this.smsCode = value;               },             ),             contentPadding: EdgeInsets.all(10.0),             actions: <Widget>[               new FlatButton(                 child: Text('Done'),                 onPressed: () {                   FirebaseAuth.instance.currentUser().then((user) {                     if (user != null) {                       Navigator.of(context).pop();                       Navigator.of(context).pushReplacementNamed('/homepage');                     } else {                       Navigator.of(context).pop();                       signIn();                     }                   });                 },               )             ],           );         });   }

   When the user enters the code in this and taps on the done button. it will first check whether the currentUser() is null. Why ? This is to check if the user is already verified automatically. If the user is verified, then we don’t need to check the entered code right ? we could simply log him/her in.

3. If the user is not verified already, I am simply using the below function to sign him/her in.
   signIn() { FirebaseAuth.instance .signInWithPhoneNumber(verificationId: verificationId, smsCode: smsCode) .then((user) { Navigator.of(context).pushReplacementNamed('/homepage'); }).catchError((e) { print(e); }); }

   1 2 3 4 5 6 7 8 9

   signIn() {     FirebaseAuth.instance         .signInWithPhoneNumber(verificationId: verificationId, smsCode: smsCode)         .then((user) {       Navigator.of(context).pushReplacementNamed('/homepage');     }).catchError((e) {       print(e);     });   }

   This function will use the verification id and the smsCode that the user sent to sign the user in. If it is successful he will be redirected to the homepage.