Flutter-Firebase(Firestore) CRUD App using Riverpod.

Today , lets build a quick flutter CRUD app for storing movies using Firebase’s Cloud Firestore database and a simple Riverpod Provider .

Demo of what we are going to build :

Step 1 : Create a new flutter project.

Open up a new directory and within the terminal hit :

flutter create your_project_name 

Create Flutter Project

Step 2 : Setup a new Firebase Project .

Here is a quick YouTube tutorial for your reference : Fireship Flutter Firebase Setup (both Android/IOS setup). In the Firebase Console you will find Cloud Firestore option , hit create database in test mode and go with the default options . This will setup the firestore database for our flutter app .

Cloud Firestore set-up

Step 3 : Add Firebase dependencies to Pubspec.yaml file.

For latest versions , head over to : Dart packages and copy the latest versions . If you are using VS-code , then there is a handy extension(Pubspec Assist) that helps you install latest dependencies by simply typing names .

Firebase Dependencies(Pubspec.yaml)

firebase_core is needed for Core firebase functionalities and everytime you interact with firebase.

cloud_firestore is needed to interact with our remote firestore database and perform CRUD operations from our flutter app.

flutter_riverpod is needed for managing the state within our app .

Step 4 : Initialize our flutter app with Firebase.

Refractor the sample Counter app code in main.dart file with the code given below .

Main.dart

WidgetsFlutterBinding.ensureInitialized();

The above line has to be added compulsorily so that our flutter app can communicate with Firebase (It calls native API channels ) . Detailed info available here .

await Firebase.initializeApp() ;

This initializes a new FirebaseApp instance by name and options and returns the created app. This method should be called before any usage of FlutterFire plugins.

Finally , wrap the MaterialApp with a ProviderScope (a widget that stores the state of all providers used in the app), so as to access state from various widgets and contexts .

Step 5 : Lets setup the Movie model .

Create a new Folder called as Models and a file Movie.dart within it .For the sake of demo , lets have 3 simple fields i.e. movieName , posterURl and the length of the movie . (These are the fields that would be stored in firestore database as well).

Step 6 : Lets setup the Database class.

This Database class will contain all the methods that we will require to implement CRUD operations and manipulate the data in Firestore .

Database Class

On line 49, We create a simple Riverpod Provider called databaseProvider through which we can access the instance of our Database class and thus call all the Database methods through it.

Step 7 : Lets move to the UI (the JAZZY stuff) .

Lets start from the HomeScreen which is a simple stateless widget and displays the list of documents (movies) from Firestore database .

1. HomeScreen.dart .

2. MovieList.dart (A widget to list all the movies used by our HomeScreen).

3. AddMovie.dart (Widget used to Add/Update a Movie) .

And that’s it 🔥 ! Wasn’t that simple ?

Do 👏 for the blog if you learnt something from the blog 😄. Also comment down if you have any doubts or suggestions regarding anything.

Source Code for this Application :

parthpanchal123/flutter_firebase_crud_riverpod

I keep playing with flutter and you can find all of my work below.

parthpanchal123 - Overview

Goodbye 👋 , meet you in another blog in a while.