Flutter Firebase: Cloud Firestore Basics on Windows

[Music] in this video we're going to connect to firebase cloud firestore using flutter for windows as with flutter for mobile devices it makes sense that some of you might want to use firebase's cloud firestore as your database solution for flutter for windows unfortunately it does not appear the official package supports windows yet but i do have a solution that will work for you the first thing we're going to do is go to console.firebase.google.com we're going to click on add project here if you haven't created a project before it should say create a project we'll give it a name we're going to disable google analytics and press create project we'll wait for it to be created okay it's now created so we'll click the continue button we're now going to scroll down a little bit and click this cloud firestore we will click create database here we're going to start in test mode because we're just wanting to test for right now hit next you can pick your cloud firestore location i'm in the central us so that works for me and i'm going to hit enable okay you should be on this page now and we're going to start a collection we're going to call it groceries we will start with a name and put apples select an auto id and hit save you should now see it in your collection [Music] now we need to get two things for our project click on project overview up here at the top and you're going to click this web link right here we'll just enter fire store windows tutorial again and click register app now in the code on the screen you will see two things an api key and a project id we're going to copy those and save them for use in a second so we're done with the firebase website at this point so we're just going to minimize it because we're going to come back to it later we're going to go into our terminal and we're going to type in flutter pub ad fluent ui that's what we're going to use for our windows app [Music] and then to connect to cloud firestore we're going to use a package called fire dart [Music] if everything worked correctly you should be able to go into your pubspec yemo file and you should see them installed now we will go ahead and delete everything we're going to go ahead and import fluent ui at the top we'll create our void main then we'll create a stateless widget here [Music] we'll replace this container here with fluent app down here we'll create a stateful widget [Music] we will set the color to blue inside this container [Music] we take that and we run it and that's how it's looking at the moment so now let's go ahead and get firestore initialized in our app we need to import fire dart at the top [Music] directly below the import we're going to create two constants one for the api key and one for the project id so these are the two things that we saved earlier we're going to go ahead and put those in these values and then here in main we're going to make an adjustment and we're going to initialize firestore right here at the top so to test our connection let's go ahead and just read the groceries collection to the console let's add an instance of our groceries collection inside firestore home state [Music] and then we're going to remove the text widget and put in a column and a button to list the grocery records and there's the button there now in this on pressed here we will grab all the records from the grocery collection and simply print them out [Music] i'm going to restart the app here and if i press list groceries here we should see the record in the console now we're going to add a grocery item to our groceries collection we can first add a button [Music] we now have the second button here and then we can simply add this code to add an entry of bananas to the collection [Music] now if we press this button here we will see that the add item button was pressed if we go back into our collection you'll see the new entry with bananas in it and if we press list groceries again we will now see both records now we need to add a button to edit a grocery item we'll just create a button underneath add grocery item and we will see that button right there and we're just going to hard code and update for now so we're going to grab this id for apples copy that [Music] [Music] so we will grab the document with this id and then modify it to have an exclamation point and then we will print edit grocery item button pressed so now if we press this button here we see it printed edit grocery item button pressed we see that the record has the exclamation point now and if we press list groceries we also see the exclamation point there finally we're going to add a delete button to delete a record underneath edit grocery item we'll create another button [Music] and it's right there we will just reference the same document id [Music] we'll print that the delete button was pressed we'll press the delete grocery item button we'll see that the delete grocery item button was pressed here we'll see that the record is gone the only one is bananas now and if we press list groceries we'll see that there's now only this one record so that's the absolute basics for working with cloud firestore in flutter for windows in part two we will add a list view and build a working app so stay tuned and we'll see you in the next one [Music] [Music] you

Channel: Learn Flutter with Me

Views: 14,662

Keywords: cloud firestore flutter windows, flutter firebase Tutorial, cloud firestore flutter, flutter with firebase, flutter firestore crud, cloud firestore flutter desktop, flutter firebase, flutter firebase setup, flutter, firebase, flutter tutorial

Id: Tw7L2NkhwPc

Length: 8min 53sec (533 seconds)

Published: Mon Mar 14 2022