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.
Now open the main.dart and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import 'package:flutter/material.dart'; import 'loginpage.dart'; import 'dashboard.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), routes:<String, WidgetBuilder> { '/homepage' : (BuildContext context) => DashboardPage() }, ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Crud sample'), backgroundColor: Colors.blue, centerTitle: true, ), body: new Center( child: LoginPage(), ), ); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import 'package:flutter/material.dart'; //Firebase Auth import 'package:firebase_auth/firebase_auth.dart'; class LoginPage extends StatefulWidget { @override _LoginPageState createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { String email; String password; @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(15.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ TextField( decoration: InputDecoration(hintText: 'Enter email'), onChanged: (value) { this.email = value; }, ), SizedBox(height: 10.0), TextField( decoration: InputDecoration(hintText: 'Enter password'), onChanged: (value) { this.password = value; }, obscureText: true, ), SizedBox(height: 10.0), RaisedButton( onPressed: () { FirebaseAuth.instance .signInWithEmailAndPassword( email: this.email, password: this.password) .then((signedInUser) { Navigator.of(context).pushReplacementNamed('/homepage'); }).catchError((e) { print(e); }); }, textColor: Colors.white, child: Text('Login'), color: Colors.blue) ], ), ); } } |
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import 'dart:async'; import 'dart:async'; import 'package:flutter/material.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'services/crud.dart'; class DashboardPage extends StatefulWidget { @override _DashboardPageState createState() => _DashboardPageState(); } class _DashboardPageState extends State<DashboardPage> { String carModel; String carColor; crudMedthods crudObj = new crudMedthods(); Future<bool> addDialog(BuildContext context) async { return showDialog( context: context, barrierDismissible: false, builder: (BuildContext context) { return AlertDialog( title: Text('Add Data', style: TextStyle(fontSize: 15.0)), content: Column( children: <Widget>[ TextField( decoration: InputDecoration(hintText: 'Enter car Name'), onChanged: (value) { this.carModel = value; }, ), SizedBox(height: 5.0), TextField( decoration: InputDecoration(hintText: 'Enter car color'), onChanged: (value) { this.carColor = value; }, ), ], ), actions: <Widget>[ FlatButton( child: Text('Add'), textColor: Colors.blue, onPressed: () { Navigator.of(context).pop(); crudObj.addData({ 'carName': this.carModel, 'color': this.carColor }).then((result) { dialogTrigger(context); }).catchError((e) { print(e); }); }, ) ], ); }); } Future<bool> dialogTrigger(BuildContext context) async { return showDialog( context: context, barrierDismissible: false, builder: (BuildContext context) { return AlertDialog( title: Text('Job Done', style: TextStyle(fontSize: 15.0)), content: Text('Added'), actions: <Widget>[ FlatButton( child: Text('Alright'), textColor: Colors.blue, onPressed: () { Navigator.of(context).pop(); }, ) ], ); }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Dashboard'), actions: <Widget>[ IconButton( icon: Icon(Icons.add), onPressed: () { addDialog(context); }, ) ], ), body: Center()); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import 'dart:async'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_auth/firebase_auth.dart'; class crudMedthods { bool isLoggedIn() { if (FirebaseAuth.instance.currentUser() != null) { return true; } else { return false; } } Future<void> addData(carData) async { if (isLoggedIn()) { Firestore.instance.collection('testcrud').add(carData).catchError((e) { print(e); }); } else { print('You need to be logged in'); } } } |
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.
Add a car using the button on the top right
Cool right? So this is how you add data into your Firestore collection from your flutter apps.
Check your firestore collections as well.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import 'dart:async'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_auth/firebase_auth.dart'; class crudMedthods { bool isLoggedIn() { if (FirebaseAuth.instance.currentUser() != null) { return true; } else { return false; } } Future<void> addData(carData) async { if (isLoggedIn()) { Firestore.instance.collection('testcrud').add(carData).catchError((e) { print(e); }); } else { print('You need to be logged in'); } } getData() async { return await Firestore.instance.collection('testcrud').getDocuments(); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
import 'dart:async'; import 'dart:async'; import 'package:flutter/material.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'services/crud.dart'; class DashboardPage extends StatefulWidget { @override _DashboardPageState createState() => _DashboardPageState(); } class _DashboardPageState extends State<DashboardPage> { String carModel; String carColor; QuerySnapshot cars; crudMedthods crudObj = new crudMedthods(); Future<bool> addDialog(BuildContext context) async { return showDialog( context: context, barrierDismissible: false, builder: (BuildContext context) { return AlertDialog( title: Text('Add Data', style: TextStyle(fontSize: 15.0)), content: Column( children: <Widget>[ TextField( decoration: InputDecoration(hintText: 'Enter car Name'), onChanged: (value) { this.carModel = value; }, ), SizedBox(height: 5.0), TextField( decoration: InputDecoration(hintText: 'Enter car color'), onChanged: (value) { this.carColor = value; }, ), ], ), actions: <Widget>[ FlatButton( child: Text('Add'), textColor: Colors.blue, onPressed: () { Navigator.of(context).pop(); crudObj.addData({ 'carName': this.carModel, 'color': this.carColor }).then((result) { dialogTrigger(context); }).catchError((e) { print(e); }); }, ) ], ); }); } Future<bool> dialogTrigger(BuildContext context) async { return showDialog( context: context, barrierDismissible: false, builder: (BuildContext context) { return AlertDialog( title: Text('Job Done', style: TextStyle(fontSize: 15.0)), content: Text('Added'), actions: <Widget>[ FlatButton( child: Text('Alright'), textColor: Colors.blue, onPressed: () { Navigator.of(context).pop(); }, ) ], ); }); } @override void initState() { crudObj.getData().then((results) { setState(() { cars = results; }); }); super.initState(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Dashboard'), actions: <Widget>[ IconButton( icon: Icon(Icons.add), onPressed: () { addDialog(context); }, ), IconButton( icon: Icon(Icons.refresh), onPressed: () { crudObj.getData().then((results) { setState(() { cars = results; }); }); }, ) ], ), body: _carList()); } Widget _carList() { if (cars != null) { return ListView.builder( itemCount: cars.documents.length, padding: EdgeInsets.all(5.0), itemBuilder: (context, i) { return new ListTile( title: Text(cars.documents[i].data['carName']), subtitle: Text(cars.documents[i].data['color']), ); }, ); } else { return Text('Loading, Please wait..'); } } } |
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.
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..
