Recently, I’ve been working with streams and BLoCs in Flutter to retrieve and display data from an SQLite database. Admittedly, it took me a very long time to make sense of them. With that said, I’d like to go over all this in hopes you’ll walk away feeling confident in using them within your own apps. I’ll be going into as much depth as I possibly can and explaining everything as simply as possible.
In this post, we’ll be making a simple app from start to finish that makes use of streams, BLoCs, and an SQLite database. This app will allow us to create, modify, and delete notes. If you haven’t done so yet, create a new barebones Flutter app using flutter create APPNAME. It'll be a lot easier to understand all this if you start fresh. Then, later on, implement what you learned into your existing apps.
The first order of business is creating a class to handle the creation of our tables and to query the database. To do this properly, we need to add sqflite and path_provider as dependencies in our pubspec.yaml file.
In case it doesn’t run automatically, run flutter packages get to retrieve the packages. Once it finishes, create a data folder and a database.dart file within it. This class will create a singleton so we can access the database from other files, open the database, and run queries on that database. I've included comments to explain some of the code.
Create another folder, models, and add one file to it: note_model.dart. Here's a great tool to easily make models: https://app.quicktype.io/#l=dart.
NOTE: Keep in mind that models do NOT have to copy the columns in the table. For example, if you have a user id stored in a table as a foreign key, the model probably shouldn’t contain that user id. Instead, the model should use that user id in order to retrieve an actual User object.
With our note model created, we can add the final functions to our database file that’ll handle all note related queries.
Let’s get started with streams and BLoCs now. If this is your first time working with these, it can be quite daunting. I promise you though that streams and BLoCs are exceptionally simple once you get past the learning phase.
The first thing we need is a blocs folder within the data folder. This folder will contain all our BLoCs, as the name suggests. Let's create the files for each BLoC: bloc_provider.dart, notes_bloc.dart, and view_note_bloc.dart. One BLoC per page and one to provide the BLoCs to those pages.
The bloc_provider is in charge of easily providing our pages with the necessary BLoC and then disposing of it when necessary. Every time we want to use a BLoC, we'll be using the bloc_provider.
Whenever we need a BLoC on one of our pages, we’ll utilize the BlocProvider like this:
Let’s create our notes BLoC which will handle retrieving all our notes and adding new notes to the database. Since our BLoCs are page specific, this BLoC will only be used on the notes page. I’ve commented the code to explain what’s going on.
With the notes BLoC created, we have everything we need to create our notes page. This page will display all our notes, and allow us to add new ones. We’ll put the code for our notes page into main.dart. Once again, I've commented on all the necessary pieces of code to explain what's going on.
Now we need a way to view, edit, save, and delete the notes. This is where the view note BLoC and the view note page come into play. We’ll start with view_note_bloc.dart.
Now we can build the actual page to allow us to interact with our notes. The code for this page is going in view_note.dart.
That’s all it takes to work with streams, BLoCs, and SQLite. Using them, we’ve created a super simple app that allows us to create, view, edit, and delete notes. I hope this walkthrough has made you more confident in working with streams. You’ll now be able to implement them into your own apps with ease. If you have any questions, please leave a comment as I’d love to answer them. Thanks for reading.
View the full code here: https://github.com/Erigitic/flutter-streams