How to show live Firebase data in your Flutterflow app

In this video we show you how to display data from your Firestore database in your Flutterflow project.
We'll show you step by step how to:
- Create your Firebase Schema in Flutterflow
- Connect widgets to live data
- Display nested data in your app
- Pass data between pages in your app
Learn more about using data in your Flutterflow app 👇
docs.flutterflow.io/data-and-...
Lear more about our low-code app builder 👇
flutterflow.io/
#flutter #lowcode #apps
//
FlutterFlow is a low-code builder for developing native mobile applications. You can use our simple drag and drop interface to build your app 10x faster than traditional development. In order to build your custom app fast, you can build visually, connect a scalable backend, & export Flutter and DART code. When you’re ready to launch, deploy directly to the App Store for both iOS & Android devices. Start Building Differently.

[@erik-fisher]

This guy and his informations are super valuable to me! Thank you!

[@ryannoe86]

Hey FlutterFlow, pay this guy extra. He’s phenomenal at teaching!

[@Emicss]

Very nice explanation, if I may though, would be nice to see the end result of what we are trying to achieve at the beginning of the video to ensure that it will answer our need. Still these videos are awesome ! Thank you

[@Pankomentator]

Why not to start from a simple example with passing one object like name, and then start showing reference stuff. I didn't get this explanation..

[@wiseguyfittness]

Yes, your teaching style is exactly what I was looking for. Please continue to make more videos like this. This was very helpful.

[@littleheartsart6925]

Ok, I'm totally mind blown. I'm going to have to watch that like six times to comprehend it. Having said that, I really like the style in which you presented this info. Also, I'm confident I'll be able to grasp this, but will just need to step away and step back again later. Thank you!

[@gopinathvaradarajan2161]

Beautiful video trust me this is the video I was looking for !! Probably the best video till date about the databases using flutter flow in the internet !! Please make more videos like these and increase the flutterflow community !!

[@wikithoughts]

Thanks for instructing this way! Many of the previous videos are done so quick that we cannot follow what is happening. Keep up the good work mates

[@juanpasalagua2402]

I wish tutorials were more like this one. Very well explained. Thanks

[@user-dc3dg6xq8n]

Just wanted to leave a comment to say (like many others) this was really well explained and highly educational. Kudos to the person explaining in the video. You sir are a great teacher. Thanks Flutterflow team. Hope more videos like this will be made in the future!

[@af4043]

Great, fast pace. Not too slow. All well explained, thank you!

[@ScarePrankCentral]

Amazing. I watched loads of videos and couldn't get my data to work. I followed your video and everything worked first try. Thank you very much.

[@flyguywithacamera]

This a great tutorial. Your teaching style is clear, concise and at a pace I can follow. I especially like how you explain "why" you are doing things so that I can apply it later in my own projects. Can you please, please, please make a video about how to validate forms. I tried applying these methods but it doesn't seem to work. Thanks keep your vids coming!

[@lester4369]

dude you are the best. You are freaking awesome. I am so overwhelmed with joy. I've been banging my head to the keyboard and questioning my life for not getting how to deal with the data. But you saved me. Love you 3000

[@FlutterFlow]

No, you're the best:)

[@TurbotextInsuranceCRM]

I really like how well this guy is explaining and training. Good stuff

[@NoCodeFilmmaker]

Hands down they should've had you doing these tutorials from the beginning. You truly have the gift for teaching. I signed up for the $70 a month plan but for some reason, out of the blue, the template widgets stopped working. I press the button and nothing happens. I reset my browser data and cleared cooking and everything but still no dice. Does this have to do with the recent upgrade? Keep up the AWESOME instruction 🙌🙏💯

[@vehiki]

I've been looking for this for so long! Thank you! Finally!!!

[@eliranef]

Finally, someone explains it properly.

[@matthewgustafson7453]

Would love to see a specific video on how to setup images. Not only uploading images, but how to pull images from firebase when user selects different inputs like radio buttons. Awesome work so far, thanks heaps.

[@ericoschatz6438]

This good stuff …!!! I really like your way of teaching and explaining the content. It really helps me to understand the logic and thinking behind it. Thanks a lot. Keep up the good work and keep these videos coming.

[@AbdRzq16]

This is an awesome tutorial. Thank you for this perfect explaining. I hope you do more of this like explaining how to make references for users, how to bond two collections together or how to show multiple collections in one page, subcollections, filtering and ordering data. How does it look in Firebase. I found out most of these on my own, but it will be great for new users to know the possibilities of FlutterFlow sooner. Thank you again.

[@IspyrGameDev]

Awesome, do you know how to order/sort the Dynamic Children? Would love to be able to do this.

[@jacknimmo2926]

kzbin.info/www/bejne/romuk4eAmrd7aMk

[@adamamad7330]

I normally never comment but this tutor is really special.

[@mhamedharif3792]

Thank you very much. This is an awesome tuto. You have the patience to repeat that makes the concepts clear.

[@arnaudlelong2342]

Very well presented, thanks mate!🍻

[@ChrisS-oo6fl]

Please do a video explaining user specific data. Its confusing with firebase. It’s almost always demonstrated with local storage. Also how to allow data to be displayed only to a team of users would be cool too. Like a to do list or inventory that team members could all see that’s specific to them as a poor example. Or customizable collections for users that are available to all users but obviously once customized would only be viewed by that user. Without sub collections this and proper firebase rules gets kinda murky. Especially for the type of users that will benefit the most from this FF.

[@jacknimmo2926]

kzbin.info/www/bejne/romuk4eAmrd7aMk

[@kosarsan4777]

Excellent teaching style ever. well done

[@peteb561]

Man, that was so helpful - what a fantastic teacher.

[@alintcaci9835]

I hope you do more like this video. It was very helpful. Thank you!!!

[@experiencelabel]

Great tutorial! Explained very well. Hopefully, down the line, this process will be simplified, easier to set up, and more intuitive (better UX/Flow). Personally, it somewhat feels like following a tour guide through a maze. Overall, loving the platform, and backend possibilities. Looking forward to more tutorials like this.

[@michanowaczewski9561]

You are a perfect teacher for FlutterFlow! More, please! Every lesson should be like this!

[@robinbeveridge1189]

Great tutorial. I'd really appreciate something similar on using sub collections in FF. Especially how to create sub collections through user interactions.

[@BlancCarbone]

The tutorial is as awesome as the framework itself.

[@siphiworatsibe5609]

I love you for this my brother. Thank you so much!

[@gilbertosmoura]

Parabens, otimo professor, um dos melhores que ja conheci, continue assim.

[@andrewdicharry1438]

Great tutorial! As everyone has said, you teach in a way that is very easy to follow. I'd like to know how a user might add a new list item. Basic example: I have a to do list app and the user wants to add a task to that list. How do you set that up dynamically?

[@malikmansoor216]

Thank you Team Flutterflow that was so helpful

[@asletic]

very clear , best tutorial so far thank you.

[@boyakoosha]

Excellent video and product. Thanks!

[@valentinaalmanza3255]

do more of this!! this is amazing

[@cmc.community8125]

Awesome tutorial, the speed, depth of information, all perfect, thank you so much! Next question is how to combine 2 or more collections , i want to make a course system with lessons and (under lessons) topics?

[@al3030]

Thanks for the helpful video!

[@mjpender9443]

Thank you so much for the tutorials. I was wondering about the pricing plans. How many end users of my app can I have on each plan? Thanks, MJ

[@RenanMainardes]

Awesome video! Very helpful! Thanks a LOT!

[@hughdavies8176]

Great video - thanks.

[@miha4042]

God damnnn this guy is good at explaining.

[@jadeslayer5841]

Hey! The video was really awesome! But could you please make a video on how to add the documents from within the app like maybe when a button is pressed? It would be really helpful!

[@rectorli971]

He is MC guire(the webflow guy)of flutterflow

[@tomcuong9588]

Very good. Thank you..!

[@yes...107]

Hey! So Im having some trouble with the new system and UI as it has been mostly overhauled. Would you mind doing an updated tutorial for this? Thanks!

[@williamjsheehan]

Thanks, well articulated. Got to say but my head spinning a bit with all the references, lists, children.... seems other NoCode tools make due with a link to Google Sheet or Airtable where I an see data in one view, move around columns, etc. Is there an ability to import from a sheet? Also appreciate your earlier comment that term "Document" is confusing and overlaps with the rest of the world, why was it not called at item or record?

[@isheriff82]

Haha I was looking for this, thx a bkunch

[@fanastroneer]

Hi, help me please. How to make a file download button with fireStorage and a file open button in a standard program?

[@anepsaaidhustle9093]

Hi! can you answer my questions. type: travel app categories: 4 type of activities (to be listing by service provider and can be view by any users) what is the best structured for items which have it own categories. should i use the data type to bundle the listing information or manage contents like you do for each collections?

[@hanna197]

Very helpful video! Can you make a tutorial for a "recent activity page" or "history page"? When I click anything to my app it will show on "recent activity page" Thank you!

[@IspyrGameDev]

Fantastic tut! Is it possible to Order/Sort the Dynamic children?

[@gamebushrd]

How do I get a count of documents from a collection in order to get this number to be used in the app?

[@telmii]

Can you do a video explaining how to incorporate the calendar widget into an application for booking?

[@vishalchouhan07]

how to create complex data bindings like a card with an image with 3-4 variable strings and a button. I want to create a card that is connected to user names, their profile pics, some details about them in 3-4 variable strings and a button to call them. also clicking the card will bring them to their profile page

[@biribiribanban6228]

Good job, but is it possible to get data from a realtime database and not from firestore?

[@ogunleyemark4069]

how can the data be saved and is it possible to implement pictures(art or a clothing line or create a messenger) Thank you well detailed I am a Newbie we need more patient teaching like this .....

[@juannieves8643]

I already have a catalog of products in excel and a separate folder where I have the images of the products named as the barcode data of my product in excel, I have already uploaded the data of the products in excel through JSON to firestore but I don't know how to link the images to each product in firestore or flutterflow, I already have some images in firebase storage but I don't know how to automatically link them to each product (there are too many products) ... I'm going crazy,would be very helpfull a tutorial to link images dynamically to documents in my database through a reference or the solution that is functional, or if someone in comments can help

[@autisticseal4111]

Is there a way to add documents to subcollections

[@0xfal]

Please anyone help, can I pass parameters and data from different databases? I want to create an explore page where when the post is clicked it navigates to the post's creator profile page. Should I just put the database of the video datas onto the authenticated users database? Thanks anyone who helps

[@thejacksonrobolshow5332]

Love to have something on how to create an events calendar.

[@yosefchaimkahn]

I would like to learn how to get data from the user and having their input update the database

[@franz605]

Hi there, I am a bit frustrated since I tried to solve my application with your advises. Simply said, I want the user to choose from a document from Firebase in a dropdown on one page and then integrate a list of values from that document in another dropdown on another page. It sounds so simple, but still I couldn't manage. Any advice or further tutorials? Thank you in advance and greetings from Germany

[@hamzz1840]

can anyone help me how to show the data in realtime database to flutterflow? it would be very useful for IoT project developer that many of them using a realtime database as their database

[@user-gd1yt3tk4x]

How can I make the price changes if the user picks a certain color? For example: Red is $20 but blue is $30.

[@BGdev305]

Honestly, it seems like the binding (and where to click for it) and querying could / should all be done from the same area and it seems like the excessive amount of clicks could be shortened. Why not have a modal (for advanced users) to setup the query, binding and passing data all at one time, one modal?

[@Mani1990]

You are a god send

[@FlutterFlow]

Well, thanks

[@klemn0291]

Does firestore database work locally or only on cloud?

[@youngstar420]

When I press add document it just keep loading qnd nothing happen what happen here?

[@_kingque_]

Your're sooo much better than the last guy!

[@leoharing]

Genial!

[@PraveenKumarhallikedkar]

Can you please create a tutorial on retrieving videos from Google cloud

[@bindasgamingyt390]

How to use function without purchase paid plan?

[@say5s]

How add files and show in the app

[@MobileGamingSquad]

Passing parameters does not work. When I click UNSET and choose merch > Reference I get hit with red text that says Document ID What should I do?

[@birsingh5388]

How to add item into cart from here and proceed to the payment?

[@vince2nd]

I see some UI changes since the last time i used FF

[@mathiassalome1749]

The online app is constantly freezing up, what a pity! And in the video It's confusing that you interchange the use of the word document and item, in spite of having highlighted that 'Document' in this case means items in an array, or simply an item, and not the usual meaning as in a file. Thanks for the detailed explanation though...

[@hunt707]

Thanks for making this video, despite following the exact instructions, I am seeing [Name] on the UI when I test run it. The read values of the document are not read although the Read permissions are given in the rules. This is frustrating, what could be the issue?

[@hunt707]

Name is a text field in my collection

[@maginixx]

please show how infinite scroll as you the API data country 100 for example, if every 3 records show, when you pull to the end, the data in the column, all had to load more 30 what already gives 60 , and each time that you load more automatically and dynamically incrementing until you give the 100 total records that come from the json API listed, I at flutterflow so far have not put a function that does this automatically, and this feature is extremely important, crucial for those who have many records coming in the api and wants to load everything in the app inside a listview or wrap column, as if it is pulling the pagination little by little but with auto increment in the column called scroll au increment, I don't know how to work with code and I chose to pay and use flutterflow for being a non-excellent option, but now we don't provide this fun that is very important and we need more, urgently please if there is any way to help ask what to help, because I'm crashing 1 me s in my app I can't solve this I have many no json banks I wanted to bring it little by little and on a screen as if it were all the data per record divided by pages because there are many, but I'm not trying to do it because the platform doesn't give that option , help me answer. OBS: the name of the system I'm talking about is: Increment content in Column from API On pull To refresh we need auto Increment content in Column from API On pull To refresh, automatic , this tool still doesn't have it when you create the query chidrens in the column passing the content, please help we need this I can't finish my project I want to sign the plan but no I can even finish this, I need to bring the API records that come per page are 30 on each page, I don't know how to work with code, I don't have time for that, and I need to finish my project to be able to pay the plan and download my code, for Please could you implement this au increment tool as the person pulls the scroll to the end and the query increments the amount of record you want to appear until giving the final record value returned by the API in json. please help paste this function, we are waiting, until then I will wait to be able to change my plan from free to premium. thanks !! if you need help, just tell me and I'll pay you to put a tool already ready in that part that when you click on On Pull to refresh, it updates the api data, with auto increment updating the data by pagination according to the amount of record chosen by the developer in the tool part > (Generating Children from Variable) in "Max Items" if you put every 10, for example from the json API, of 50 it would load 10 records 5 times each time the user scrolls to the end the records listed within the list view or Wrap column, all automatically, without having to change code or anything like that, if you need help with this I pay for it because it costs a lot to finish my project, and I depend on this, thank you and until later I stay in I wait !

[@ashishk5016]

Can you share link video of Role based authentication in flutterflow using one specific login module where user is admin should take him to admin dashboard where he should get users logined in and should be able to add user delete user etc For client once authenticated it should take him to client page where he can see the product etc

[@luisalvareztorrez6385]

Por favor podrían hacer videso más aplicativos, no hay mucha información util y actualizada de flutterflow

[@miketucker2658]

can you do a video on how to do an 'AND' query from Firebase or Algolia. I have a Firebase collection I would like to combine into one query result. Similar to Select * from customers where customer_name = 'mike' OR customer_name = 'joe'

[@harkimvezi5105]

Best tutor ever!

[@boombustinvest]

why use "dynamically create children in a column instead of using a list view?

[@davidesoncin3045]

Is it necessary to wait 2/3 minutes each time to see a preview? 😅

[@valirmasha4718]

clear sample and tell what wrong then correct the wrong one is best to tell how it work. thanks,

[@say5s]

How make app like Twitter

[@hughgallagher]

Its a great video, but I still think there is problem with the whole firebase setup user journey. You skipped the firebase setup part saying 'don't worry it will only take 10 minutes, but in reality this seems to be a pretty complicated affair with lots of problems encountered along the way. I have set up my Firestore DB and created a clean FF project using the Fin Wallet template. When I run it in test mode and try to create an account it just posts back to the same screen with no error message and HTTP 400 errors in browser dev tools. What am I missing? MY FIRSTORE DB DEPLOYED.... so It should create the user when I run the project and create a new user account in test mode but it doesn't do this. Instead in browser dev tools I just see HTTP 400 errors.

[@jeroenritmeijer7283]

Couldn't agree more. It is a great tutorial, but their link - for setting up - was sending me in circles. I made it work in the end, but it was far from a smooth experience. At times stuff just didn't work and there were no error messages or hints.

[@WaleedChallenge]

شكرا لكم على هذا المجهود الكبير ولكن هل من الممكن صناعة فيديوهات عن Flutterflow بالعربي Thank you for this great effort, but it is possible to get videos on Flutterflow in Arabic

[@d-talk5851]

Why cannot choose the subtitle?😢

[@sovereign797]

Good instruction but the quality of the video is sub-par for me, everything is blurry. I was able to follow along but it was definitely an eyestrain to try to see.

[@adrianpradzioch5193]

You have a cool voice

[@FlutterFlow]

Thanks

[@debunkitnow]

Love your style of teaching and Flutterflow in general but i wonder why not make it easier to understand by giving it a name instead of "Documents" to "Item" or "Record" instead? Is it just to be different?

[@FlutterFlow]

That's a great question, Malcolm. We use the term "documents" because that's what they're called in Firebase.

[@andrehufschmid]

the worst thing you can when explaining things is to show you a dozens of things you shouldn't do. The best approach is to get to the point.

[@brandz_up]

Why is it built like this, it's so complicated

[@jjones0822]

"Okay"