Flutter: Bookshelf App Part 2, Personal Notes and Database Integration
Adding the database and some nice animations.
Before I start:
In my last post ( https://goo.gl/isZaDw), I talked about how I built an app in under an hour. The app is done. It serves its purpose of displaying books via the internet. As cool as that already is, it could be even better. Throughout this series I will keep improving the app and adding exciting new features and eventually, I will release it on the Google Play Store and the Apple App Store.
In this post we we’ll walk through implementing the database to store notes and favorite books.
I added a few classes, here is the overview (I highly encourage you to look into the Github https://github.com/Norbert515/BookSearch):
- The book.dart is simply a model class containing title, url, id, starred and notes
- Utils contains the fade Transition (Used in conjunction with hero transition)
- The rest should be self explanatory
I also put BookCard into its own widget (inside main.dart).
The database is going to be implemented as to only store entries which are starred/ given a note. This way searching thorough books won’t clutter up the database.
In the first part, we had only one class and not a lot of code, putting everything in one spot is fine for something small as that. But as the project starts growing, structure becomes necessary.
I made a few structural improvements (which will be refined as the development goes on) which are:
- The
Bookclass got bigger, so I put it into its own file - I made the
BookCardas separateStatefulWidget
It’s initialized with a book.
The BookCardState holds a mutable copy of that book, this is because the database might contain the same book with additional information and the user can update those information any time.
That’s about it
Database
I added two dependencies, sqflite and pathprovider in the pubspec.yaml
sqflite: any
path_provider: "^0.3.1"Setup
The database is a singleton, which can be accessed with the static getter BookDatabase.get(); . The init() method sets up the database at the right location (using the path_provider) and creates the SQLite table with all the necessary columns.
The result of the db.rawQuery (which is a standard SQLite query) is a List of Maps. It is a list because there might be multiple entries matching the search condition (not in our case), the entries are then stored inside a Map<String, dynamic> which we have to parse ourselves.
(Take a look at the book.dart file for the parsing https://github.com/Norbert515/BookSearch/blob/master/lib/model/Book.dart)
Last but not least the updateBook method, it replaces or inserts the given book.
That’s it, easy wasn’t it?
Now, the database is done, all that’s missing is its integration. And since we are in flutter, this is done in a breeze.
In each we card we check whether the book coming from the web is also in the database, if so replace it with the stored book.
When the user pressed the star icon, flip the icon and right after update the database with the new information.
Inside the _BookNotesPageState the notes need to be saved after the user types something. There are a few possibilities of doing so, there might be a button to save, or it could also automatically save after leaving the page.
I instead used the same technique from my last post (a rxDart subject which debounces the text stream), 400 ms after the user stopped typing, the book gets stored locally.
The Transition
I made my own route transition to cross fade between the pages.
This gets invoked when the user taps a card. Using the FadeTransition, the BookNotesPage is built and given the current book to display.
Finally on each page the Image is wrapped inside a Hero which takes care of the animation all by itself.
That’s about it, now the app also supports marking books and even writing personal notes!
I’d appreciate feedback whether you like this type of walk thorough, any suggestions and possible improvement are highly appreciated.
Also press that clap button a few times if you enjoyed!
