How to fetch data from firebase in flutter
How to Fetch Data from Cloud Firestore in Flutter [2023]
Timecodes:
today we are going to learn how to fetch
data from file store as in the previous
tutorial we learn how to store data in
the file store so in today's tutorial
let's quickly have a look what we are
going to achieve okay so our application
is running let's click on sign up so
first we are going to enter the details
which is the previous tutorial in which
we learn how to store data inside the
Firebase but today we were first going
to store this data and then we are going
to try to fetch this data so you've
added all the details what this is going
to do this is going to send an email and
first perform the email verification or
you can say the email authentication
which we have already created and we
have also learned how to set up our
phone number authentication which we
already seen in the previous tutorial so
let's click on sign up and you can see
your account has been created and we are
successfully redirected towards our
dashboard so now when we are going to
click on this icon at the top and inside
let's click on this edit profile it's
loading and you can see it has fetched
the records save records that entered by
the users so this is the one type of
data that we are going to fetch for the
specific user who is logged in
and the second type is when we are going
to click on this user management let's
say this is the all record of all the
users we have currently inside our
database so in today's tutorial we are
also going to learn how to fetch the
single record using some weird clause
and also we are going to learn how we
can easily fetch the logged in or
authenticated user's email and also how
we are going to file the list of details
and how we can display them right so
this is what we're going to achieve
today if you are following the series
you already know that we are creating a
flutter login application as you already
know the design portion is already
completed if you are new you can watch
the previous videos linkage in the
description again if you are new you
don't need to be worried because this
video is not directly linked with any of
the previous video and on the right side
you can see we are creating the back end
whereas in the previous video we have
completed our store data in file store
and today we are going to retrieve that
data so without wasting time let's get
started everyone in the studio and we
are inside our main.dart which is the
project we have created for flutter
login application as in the previous
video we have created a user model in
which we used dot to Json object and
also we used to store all the data
entered by the user inside this user
model and then pass this data by
converting dot to Json function to our
database so this is the user repository
that we have created for store instance
again if you are new here please I
suggest you to watch the previous video
linkage in the description or also you
can get the playlist link from the right
top corner and we use this create user
function but today let's get started
with a user model step one you can see
is to create a model that is going to
map or convert the data given by the
firestore because firestore provides us
data inside document snapshots so we
have to convert that document snapshot
to our user model so we can easily use
it in our application okay before going
to create another Constructor basically
Dart provides us to create multiple
Constructors but we have to use Factory
object at the start and then with the
dot we can create multiple construct
Constructors with different names so
let's have a look we will name it same
the class name is a user model so as you
can see the Constructor which is the
default Constructor is created so now we
are going to create different
Constructor and I am going to name it
dot from snapshot or you can call it
from document snapshot and that's it
this would have to return user model
with all the values filled and you can
see error is gone let's set comma Ctrl
alt L and inside this from document
snapshot we are going to receive
something which is definitely a document
snapshot which will be of type map of
string and dynamic and name of document
snapshot will be let's say document when
this Constructor will be called we will
receive document snapshot inside this
variable over here so from this variable
let's get we can easily fetch the data
let's say final data is equal to
document dot data so all the data is
inside this dot data object and also we
can use dot get there's a bit of
difference between data and dot get dot
get is just going to provide us a
typical value of some let's say email
password phone number but your data is
going to provide us a complete object so
that's why we're going to use dot data
if it's null we are also going to add
exclamation and then inside this email
over here that first we need to get an
ID so we can get the ID using data not
data using document dot ID because ID is
the only thing which is directly inside
this document but rest of all the videos
are inside the data object data and then
we have to pass the key names being
stored inside the firestore let me just
show you we are inside this users
collection and inside you can see we
have these fields which is email full
name password and phone number so these
should be same either small or Capital
but these should be exactly same when we
are writing over here because these are
you can say the columns from where we
can fetch the data right once the data
has been mapped now we will head towards
our user repository and will query the
Firebase in here as a step two there are
two scenarios while fetching the data
there might be a need of to fetch a
single record or there might be a
need-off to fetch all the records let's
say all the users or details of the user
so first let's try to see how we can get
the details okay let's create a final
variable snapshot data is equal to we
have to add an await sign for all the
cloud queries database dot we have to go
to collections and inside the
collections this name also uses should
be same as in the database otherwise
it's not going to return anything so
inside the collection we want to get
specific records so we will query using
where object or where Clause again this
name is the email name inside the
documents list like over here so it's
going to point towards this user which
is the collection and then dot wear is
going to point all the documents contain
email class right so inside email comma
we have multiple objects right like we
have is equal to email that we will get
from the user dot get so this is going
to return us some value okay once we
have data inside our snapshot we have to
map this data to convert it from
document snapshot to to list or to
single records so so we are calling user
data is equal to snapshot dot documents
dot map and now in here we have to call
our model which is user model Dot from
snapshot and inside the snapshot as a
document snapshot value you have to pass
e and then over here we have to Define
that we need a single value or we need
two lists so as in here in our case we
are going to get a single record so I am
going to call it dot single so it's
going to return as a single value and we
just have to return the first user data
and that's it this function is for the
single record so let's copy it paste it
one more time and let's say we want to
will fetch all the record inside some
collection we don't need any email so
what we're going to we are going to
write collections of users and where Pro
will be removed dot get is going to
return us all the documents inside this
collection and again we are going to use
this documents map to map all the values
but in here it will be to list because
all the values will be because there
might be one value or there might be
hundreds of users so we have to again
replace this future list return type
with a list of user models so there will
be multiple users that's why we have to
return list okay now we have created two
functions
so to use this function we have to call
it from wherever we want to get the
record in our case inside the features
inside the core previously we have
designed the profile section so let's
say update profile section is going to
display all the records
so inside the controllers I'm going to
create a profile controller which
extends by the getex controller and it
has a simple instance in here you can
see the step three is the first one is
to create model then we have to query
the database and fetch the data convert
it using the model object to user model
now once the data has been arrived and
converted we have to use the data okay
the function has been created but over
here the question is that how we are
going to get the email of the user to
fetch all the record from here right so
there are two possibilities let's say we
already have a list of users so when we
are going to click on the list inside
this user model ID we have the document
ID we can easily get that record from
this ID right but in this case we don't
have list of users but we want to show
the user who is currently logged in
using Firebase authentication and you
might want to update his record or want
to show the data in some screen
so for that if you head over the
repositories inside the authentication
repository you can see we already have
Firebase user created for the
authentication which is in the on ready
which is seeing that if there is any
change inside the user user is going to
click on the logout if user's session is
going to be expired if user is currently
login or log out based on that it's
going to call this ever function pass
the Firebase user and set the initial
screen so we are switching the screen to
either welcome screen or dashboard
screen based on if the user is logged in
or logged out so using the same Firebase
user we're going to get the Firebase
email and also over here inside the
authentications you can see we have two
authentication providers phone number
and email you can see the same same
email is inside our documents and also
the same email is inside our
authentication this means that this
email is already authenticated and the
rate of that user is stored inside our
database now we can easily using a
Firebase authentication object filter
record okay in here we have currently
pointing towards authentication
repository to use the Firebase user
using the underscore authentication
repository we can easily get inside our
function we will first get the email is
equal to authentication repository dot
Firebase user inside its value we have
we have all the values of this Firebase
user we can get email uid and we also
have display name and phone number over
here so if you want to perform phone
authentication then you want to allow
the user to log in then you should have
to use this phone number so in our case
we are going to use email so it can be
nullable value so add a question mark
over here error will be gone now we have
an email
so we just have to check that if email
is not equal to null in here we want to
perform our authentication which is the
user authentication to fetch the record
so press Ctrl D this is not the
authentication repository is a user
repository called the user repository
now in here we can easily write user
repository dot get user details and
inside the email we can pass the email
and that's it now this query is going to
get us the details of the user and we
can easily return all these details
otherwise let's say you want to display
an error you just have to write else and
inside you can show get dot snack bar
with some error okay now the third point
is completed this means that we have all
the record that we want of the user now
we can easily display it on the design
so inside our profile update screen
which is this one now inside these all
the fields we are going to store the
currently provided user data so inside
this column let's wrap this column with
a widget which is a future Builder
because we are going to get the value in
a future so we we cannot convert it into
a normal value so the first argument we
have to pass is the Builder the first
thing is the context and the second one
is a snapshot which is basically is a
data and then have a function so so
inside we have to return something so
first let's say we want to check that if
snapshot dot connection state is equals
equal to connection state DOT done this
means that data is completely fetched in
the else this means the data is not
fresh we want to display a progress bar
so let's return center and inside the
center as a child we want to show
circular progress indicators you know
inside if the state has been completed
means the data has been fetched now we
want to write another if if snapshot Dot
has data then we want to return the
complete column we have over here which
is this one
cut it remove this child paste it over
here and add a column so if the data is
arrived the connection is completed data
is arrived then we want to display our
complete data and in the LC state if
snapshot dot has error this means that
there is some error then we want to
display an error snapshot dot error.2
string is going to display an error and
the last thing is because we have to
return something so let's return and in
the else we just want to show that
something went wrong because once
everything is set up inside the
snapshot.data this means the data is
arrived let's just minimize it go to the
form and as an initial value of the form
we want to display the data so we can
easily convert our snapshot user model
of data let's say user data is equal to
snapshot dot data and to map it we just
have to write as user model now it's
going to pass this data to user model so
we can easily use this user model as an
initial value user model dot full name
and let's assign the same initial value
to all the fields okay any other
question is that where from where the
data is coming because we did not call
any query or any object so for that we
have to call our controller which is a
profile controller so using this
controller we are going to call our data
inside this future Builder so you just
have to pass this feature as controller
dot get user data so this is going to
execute the function this function will
be store the data inside this feature
and the rest of the things will work
like this so let's try to run the
application okay so our application is
running let's click on sign up to First
register the user and using the same
credentials we are going to log in and
see the saved record has been fetched or
not so let's click on sign up and you
can see the message your account has
been created and we have successfully
redirected towards our dashboard and
also in here let's click on the document
to see the record has been arrived and
also inside the authentication let's
refresh and then you can see the email
has been verified now let's click on
this icon at the top this is the profile
and inside the edit profile it's waiting
and then you can see the record has been
fetched the same record currently we
have inside our database so first it was
waiting for the record to fetch so this
is how we can fetch the record now let's
say using the same thing but we are not
going to call this get single record of
user so this function is get all users
which then again an async function it
should wait for some time and it's a
list of user models but this one is not
a list of user models so this is going
to return all the users so let me just
copy it
head back to the design inside the
future Builder we just have to call this
function which is get all users
and just to demonstrate you we are not
going to call this column now
here near for to show the details of the
users was to show all the users I have
created uh the same feature Builder just
have to wrap with a list of user model
if you are facing some errors that error
could be that its length is not
appearing or something like that so then
inside where we are returning a simple
column I have converted that column into
list style sorry listview.builder to
create multiple list Styles shrink wrap
is true item count is snapshot.data of
length and then in the item Builder this
is basically a context and this is a
index and then to display the values
using the same snapshot you just have to
write snapshot.data means this is a
specific data of some user but then here
comes the index because in here we have
multiple users not one so we have to
Define that at this index show me the
name at the same index show me the phone
number and email and then in the next
index show me again the phone number
email and things like that so that's it
for today's tutorial I hope you learned
something new if you learn something new
please like the video and if you're new
to this channel
make sure to hit the Subscribe button
and once again thank you for watching
take care
Related queries:
how to get data from firebase in flutter
how to read data from firebase in flutter
how to get data from firebase firestore in flutter
how to read data from firebase firestore in flutter
how to get data from firebase storage in flutter
how to retrieve data from firebase realtime database in flutter
how to get data from realtime database firebase flutter
how to retrieve data from firebase in flutter
flutter firebase analytics example
