Cloud Firestore in a Windows app in Flutter

First thing we are going to do is create our project on the Firebase web site.

Click here to go to console.firebase.google.com.

Click on Add Project. If you haven't created a project before it should say Create a Project.

Next give it a project name. It can be anything you'd like it to be.

I just disable analytics since this is a tutorial. Then click create project.

You'll see the project being created...

And then press Continue when it's complete.

Now let's set up our database. We will click on Cloud Firestore around the middle of the page:

Click on Create database at the top:

For now Start in test mode and press next.

Choose a location nearest to you and press Enable.

Once that is finished you should see Start collection close to the top of your screen. Click on that.

Next we will create a collection called groceries and Click next.

Now we will create an initial record. Go ahead and click Auto-ID to generate an id for the record, then put fruit in field and Apples in value. Press Save.

If everything worked correctly you should now see the record!

Now we need to get two things for our project. Click on Project Overview Directly which should take you back to the main page.

Click the white web icon in the middle of the page.

Enter an App nickname and press Register App (You don't need Firebase Hosting for this).

Now in the code on the screen you will see two things, the apiKey, and the projectId. Copy those and save them some place for use in a second. Then click Continue to Console.

We are finished with the firebase site for now, but you might minimize the browser as we will come back to it later.

Go ahead and create a new flutter application, and we're going to add a few packages to our app before we get started. You can go into the terminal in your editor or just go into the folder from Command Line if you prefer and type this:

flutter pub add fluent_ui

Fluent_ui is similar to material, but it's more based on the look and feel of Windows. Next we are going to install firedart which is what we will use to connect to Cloud_Firestore:

flutter pub add firedart

If you successfully added both you should now see them in your pubspec.yaml file:

Now we will set up our app. Let's go ahead and delete everything and start with a simple StatelessWidget and import Fluent_ui at the top:

import 'package:fluent_ui/fluent_ui.dart'; void main() => runApp(FireStoreApp()); class FireStoreApp extends StatelessWidget { const FireStoreApp({ Key? key }) : super(key: key); @override Widget build(BuildContext context) { return Container( ); } }

And then we will add FluentApp to activate Fluent_ui in our app, and then connect to a StatefulWidget we'll call FireStoreHome:

Widget build(BuildContext context) { return const FluentApp( title: 'Cloud Firestore Windows', home: FireStoreHome(), ); } } class FireStoreHome extends StatefulWidget { const FireStoreHome({Key? key}) : super(key: key); @override _FireStoreHomeState createState() => _FireStoreHomeState(); } class _FireStoreHomeState extends State<FireStoreHome> { @override Widget build(BuildContext context) { return Container(); } }

Inside the Container we'll just set the background to blue and center a piece of white text we'll set to size 24:

Widget build(BuildContext context) { return Container( color: Colors.blue, child: Center( child: Text( 'Cloud Firestore Example', style: TextStyle( color: Colors.white, fontSize: 24, ), // TextStyle ), // Text ), // Center ); // Container }

If you run it, it should now look like this:

Let's go ahead and get Firestore initialized in our app. We first need to import FireDart at the top:

import 'package:fluent_ui/fluent_ui.dart'; import 'package:firedart/firedart.dart'; void main() => runApp(FireStoreApp());

directly below the import we are going to create two constants, one for the API Key and one for the Project ID:

import 'package:firedart/firedart.dart'; const apiKey = ''; const projectId = ''; void main() => runApp(FireStoreApp());

Remember the things I mentioned saving earlier? We will paste those here now in their appropriate places. (Note: DO NOT USE MINE! You'll want to get your own API Key and Project ID. It may not work if you use the ones listed below.)

import 'package:firedart/firedart.dart'; const apiKey = 'AIzaSyAYwGeD__hVbNlMky7GEUNXyX-OeVDG5DA'; const projectId = 'firestore-windows-tutorial'; void main() => runApp(FireStoreApp());

And then finally we will initialize Firebase in main:

void main() { Firestore.initialize(projectId); runApp(const FireStoreApp()); }

So now let's just read the results of our groceries table to the console, just to make sure everything is working correctly. Let's add an instance of our groceries collection inside FireStoreHome:

class _FireStoreHomeState extends State<FireStoreHome> { CollectionReference groceryCollection = Firestore.instance.collection('groceries'); @override Widget build(BuildContext context) { return Container(

And then we're going to remove the Text Widget and put in a Column and a Button to List the grocery records. We will set the mainAxisAlignment to spaceEvenly which just means it puts an even amount of space around the buttons (we will be adding more):

return Container( color: Colors.blue, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Button( child: const Text('List Groceries'), onPressed: () {}, ), // Button ], ), // Column ), // Center ); // Container

And then now in the onPressed we will grab all the records from the Grocery Collection and simply print them out:

onPressed: () async { final groceries = await groceryCollection.get(); print(groceries); },

the async and await accomplish two things. First, await is saying "Please wait until we have received the grocery items before you print them". The async is short for asynchronous which means that everything outside of the onPressed can move forward (e.g. the ui isn't stuck waiting on us to get the grocery Items, it can do what it needs to do).

And if you press the button You should see the results in the console:

Now we will do an Add Example. First we add our new button to the column:

print(groceries); }, ), // Button Button( child: const Text('Add Grocery Item'), onPressed: () {}, ), // Button ], ), // Column

And then we can simply add this code to add an entry for Bananas to the collection:

onPressed: () async { await groceryCollection.add({ 'fruit': 'bananas', }); print("Add item button pressed."); },

If we press the button we will see the print message in the console:

And if we go back to the firebase site we will see the new entry in the collection:

AND if we press the List Groceries button again we will see the new entry in the list in the console:

Now we need to add a button to edit a grocery item:

print("Add item button pressed."); }, ), // Button Button( child: const Text('Edit Grocery Item'), onPressed: () {}, ), // Button ], ), // Column

And we're just going to hardcode the update for now. So we will grab the id for Apples from the console and do this:

onPressed: () async { await groceryCollection .document('x3qQrSLNKeqvbhjg6O1P') .update({ 'fruit': 'Apples!', }); print('Edit Grocery item button pressed.'); },

So we will grab a reference to the record in the collection for Apples, add an Exclamation Point to the value, and then print a message.

We press the button and see the response in the console:

And we see the record was updated on the Firestore site:

And pressing the List Groceries button shows the new results:

And then we'll add one more button to delete the record:

), // Button Button( child: const Text('Delete Grocery Item'), onPressed: () {}, ), // Button ],

And in the onPressed we'll add the call to delete the Apple record:

child: const Text('Delete Grocery Item'), onPressed: () async { await groceryCollection .document('x3qQrSLNKeqvbhjg6O1P') .delete(); print('Delete Grocery Item Button Pressed.'); },

When we press the button we see the message in console:

And when we press the List Groceries button we only see the bananas record now:

So that's the absolute basics for working with Cloud Firestore, Here's the source code so far. In Part 2 we will connect a ListView and build a working app. Stay tuned!

import 'package:fluent_ui/fluent_ui.dart'; import 'package:firedart/firedart.dart'; const apiKey = 'AIzaSyAYwGeD__hVbNlMky7GEUNXyX-OeVDG5DA'; const projectId = 'firestore-windows-tutorial'; void main() { Firestore.initialize(projectId); runApp(const FireStoreApp()); } class FireStoreApp extends StatelessWidget { const FireStoreApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const FluentApp( title: 'Cloud Firestore Windows', home: FireStoreHome(), ); } } class FireStoreHome extends StatefulWidget { const FireStoreHome({Key? key}) : super(key: key); @override _FireStoreHomeState createState() => _FireStoreHomeState(); } class _FireStoreHomeState extends State<FireStoreHome> { CollectionReference groceryCollection = Firestore.instance.collection('groceries'); @override Widget build(BuildContext context) { return Container( color: Colors.blue, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Button( child: const Text('List Groceries'), onPressed: () async { final groceries = await groceryCollection.get(); print(groceries); }, ), Button( child: const Text('Add Grocery Item'), onPressed: () async { await groceryCollection.add({ 'fruit': 'bananas', }); print("Add item button pressed."); }, ), Button( child: const Text('Edit Grocery Item'), onPressed: () async { await groceryCollection .document('x3qQrSLNKeqvbhjg6O1P') .update({ 'fruit': 'Apples!', }); print('Edit Grocery item button pressed.'); }, ), Button( child: const Text('Delete Grocery Item'), onPressed: () async { await groceryCollection .document('x3qQrSLNKeqvbhjg6O1P') .delete(); print('Delete Grocery Item Button Pressed.'); }, ), ], ), ), ); } }

YouTube Description:

More Videos