Flutter – Upload files to Firebase Storage

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).

one

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.

Screenshot_20180910-183543

Tap on the FAB

Screenshot_20180910-183656

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

Screenshot_20180910-183708

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

Screenshot_20180910-183719

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.

Screenshot_20180910-183850

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).

three

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..

 

Flutter – Firestore CRUD (Updating & Deleting data)

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.

Screenshot_20180906-215839

And just tapping on a list item will…

Screenshot_20180906-215851

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..

 

 

 

 

 

 

 

 

 

 

 

Flutter – Firestore CRUD (Reading and writing data)

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.

one

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.

two

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.

Screenshot_20180906-173207

Add a car using the button on the top right

Screenshot_20180906-180739

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

Check your firestore collections as well.

three

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.

Screenshot_20180906-173232

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..

Flutter – Phone Authentication

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.

    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.

    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.

    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.

Alright. Now create a new file called homepage.dart in the lib folder and add the below code in it.

Nothing fancy guys. I am simply getting the uid of the user currently logged in and then displaying it to the user. That’s it.

Now run the app (after ensuring that you have enabled the phone Auth provider in firebase console). You will see the below screens.

Screenshot_20180903-230331

Once you enter a number and tap on verify this is the screen you’ll see

Screenshot_20180903-225833

The code arrives.

Screenshot_20180903-225835

Enter the code and tap on done.

Screenshot_20180903-225849

You are logged in.. :)

Screenshot_20180903-225853

Now you could also see the user added in your firebase console as well.

one

So, this is how you bring in phone authentication into your flutter apps guys.

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..

Flutter – Social authentication with Twitter

Hi Friends,

Hope you are all well. This post is again a sequel to my previous posts on authentication.. (Ah man, too many sequels)

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

Other flutter courses – here. (Affiliate Link)

Before reading this post, I would highly recommend you read my previous posts on authentication below.

Authentication with email/password – Click here.

Authentication with Google – Click here.

Authentication with Facebook – Click here.

Let’s begin:

A screencast of this post

 

Let’s start from where we left off.

Before bringing in the twitter plugin., we need to do some configurations here as well. Navigate to the twitter developer portal by clicking here.

Create a new app. Here in twitter, you just need to fill out a form. There’s no fancy copying and pasting code like we did for Facebook. Once the app is created, it will give you two keys. These are important.

one

Now open up pubspec.yaml file and add the dependency for twitter login as shown below.

Alright, now get into loginpage.dart and modify it as shown below.

Now we have already talked about most of the code here in our previous posts.  Let’s consider only the snippet involved in twitter login.

Alright, here we are attempting to login using the plugin. If successful we get a session (else we get an error msg).

This session will contain the token and secret which we then use to authenticate the user. Once the user is authenticated, he or she will be redirected to the Home Page.

Enable Twitter under the sign-in providers in Firebase.

two

Now run the app. You will see the below screens.

Screenshot_20180831-143618

I know the Login Screen looks absurd now. I’ll try to fix all the alignments and provide a better (and more visually pleasing) screen as we dive deeper into app building.

Now tap on Login with twitter.

You will see the below screen

Screenshot_20180831-143629

Now tap on Connect to give permission.

Screenshot_20180831-143633

You’ll now be logged in.

Screenshot_20180831-143637

That’s it.

Now open users in your firebase console and you would see that a new user has been added under twitter provider.

three

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..