Flutter & Firebase: CRUD Tutorial, Using new Firebase libraries 2021
CRUD operations are the main functions you want to know as a developer in every language or framework. We have discussed the Flutter CRUD operations with SQLite Database in this article. Here I am going to show you, how to develop it with Firestore databases from the project creation step. Firebase has deprecated some functionalities with version 0.14.0. So you need to update with these new changes or If you are a beginner, You will get into trouble with old tutorials. Follow the steps one by one and see the results.
Create a new flutter application. Here I used the Android Studio as my IDE, It doesn't matter If you are using VScode or another your favourite IDE. In the end, you would implement an application, which has the functionalities with data insert, read, delete and update.
Here I do not depend on better UI more. We just need to consider about functionalities. This is the sketch the UI of the main.dart file:
import 'package:flutter/material.dart';
void main() async {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter CRUD with Firebase"),
),
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
RaisedButton(
child: Text("Create"),
),
RaisedButton(
child: Text("Read"),
),
RaisedButton(
child: Text("Update"),
),
RaisedButton(
child: Text("Delete"),
),
]),
),
);
}
}Then you need to create a new firebase project and configure the android project with firebase project. Then add a new android app to the firebase project by completing 4 steps below.
Then Go to the Cloud Firestore, Unde the test mode, create a new collection and data path to store data as follow:
You have done all the tasks with firebase. Then again come to the android studio project. You need to import the Firebase dependencies to pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
cloud_firestore:
firebase_core :Up to now, you have done Every initial setup successfully. Then you need to build that four functions(create, update, delete, read) in the main.dart. First import the libraries.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';Then initialize the firebase inside your main function. Otherwise, it will give you an error like,
[core/no-app] No Firebase App ‘[DEFAULT]’ has been created — call Firebase.initializeApp()
To avoid this error, you need to initialize the firebase in the main function.
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}Then we will implement the Firestore CRUD methods one by one as follows. Before that, create and initialize a Firestore instance.
final FirebaseFirestore firestore = FirebaseFirestore.instance;Now you can implement those methods like this.
- Create Data
void _create() async {
try {
await firestore.collection('users').doc('testUser').set({
'firstName': 'John',
'lastName': 'Peter',
});
} catch (e) {
print(e);
}
}2. Update Data
void _update() async {
try {
firestore.collection('users').doc('testUser').update({
'firstName': 'Alan',
});
} catch (e) {
print(e);
}
}3. Read Data
void _read() async {
DocumentSnapshot documentSnapshot;
try {
documentSnapshot = await firestore.collection('users').doc('testUser').get();
print(documentSnapshot.data());
} catch (e) {
print(e);
}
}4. Delete Data
void _delete() async {
try {
firestore.collection('users').doc('testUser').delete();
} catch (e) {
print(e);
}
}Nice !!! now you can run the project and see the results. Before that, you need to implement the onpress command of each button. Finally the main. dart file completely looks as follows.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final FirebaseFirestore firestore = FirebaseFirestore.instance;
void _create() async {
try {
await firestore.collection('users').doc('testUser').set({
'firstName': 'John',
'lastName': 'Peter',
});
} catch (e) {
print(e);
}
}
void _read() async {
DocumentSnapshot documentSnapshot;
try {
documentSnapshot = await firestore.collection('users').doc('testUser').get();
print(documentSnapshot.data);
} catch (e) {
print(e);
}
}
void _update() async {
try {
firestore.collection('users').doc('testUser').update({
'firstName': 'Alan',
});
} catch (e) {
print(e);
}
}
void _delete() async {
try {
firestore.collection('users').doc('testUser').delete();
} catch (e) {
print(e);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter CRUD with Firebase"),
),
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
RaisedButton(
child: Text("Create"),
onPressed: _create,
),
RaisedButton(
child: Text("Read"),
onPressed: _read,
),
RaisedButton(
child: Text("Update"),
onPressed: _update,
),
RaisedButton(
child: Text("Delete"),
onPressed: _delete,
),
]),
),
);
}
}Conclusion
This story gives you the complete practical guide to building a CRUD application in Flutter with Firestore. Please feel free to ask any question you will face in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)
