4 years with Flutter: This is how I redesigned my most successful app (+100k downloads)
For those who already know the app, you will have been able to see its evolution over time, but in summary I made this business ideas app with the aim of learning how to develop apps in Flutter.
If you want to see more details, you can read this article and this other one where I was sharing what I was learning.
So what’s all this about?
Well, a month ago I released the new version 3.0.0 with many changes, in fact, I decided to rewrite all the business logic from scratch.
Let us begin.
Service-focused architecture
I spent some time researching and analyzing the best practices for the app’s architecture since I wanted it to be robust and scalable, but at the same time to maintain a certain level of simplicity as it is a project maintained by a single person, that is, me.
For some versions ago I had been experimenting with an architecture focused on services for certain functions and for the new version I decided to finally move everything to this model.
If you are not familiar with it, here you have this brilliant presentation by Angelina Fabbro where she explains how they structured the Splice app, you can also find the presentation slides here.
In short, this proposal seeks to encapsulate all app functions that have a level of interaction with device functions or calls to an external source. This is independent of which library is used and makes it easier and more organized to change or update libraries.
Some examples of services are push notifications, local storage, text to speech as well as connection to Firebase, Crashlytics, Admob, etc.
When I discovered this video and saw the approach to this architecture, I felt that I had finally found something that aligned with what I was looking for and with my work philosophy.
There is much talk about the CLEAN architecture, but it is so “clean” that many times it becomes “dirty” by creating such a subdivided structure that I have come to see up to 3 levels of directories or more to “organize” a single file.
In my very personal opinion, if the directory is not going to contain more than a single file, it is not worth it to be a specific directory for this, but this is to my very personal taste and my aversion to having to navigate between so many sub sub subdirectories and files. Yes, I know there is a file browser, but I just don’t like it.
For the new version I decided to further implement this service-focused architecture in the project and went on to evaluate the big dilemma when working with mobile applications…
…yes, you guessed it; the state management.
State management
I had been working with Provider quite well, but I felt there were limitations, although I wasn’t exactly sure what.
Yes, I know, this is the direct consequence of solving each new challenge of the app with Stackoverflow code and some Indian youtuber (we give thanks for the Indian youtubers), but in one way or another you learn.
Anyways, after reading several articles and watching some tutorials on Youtube, I decided to try Riverpod.
You must be wondering why I didn’t switch to BLoC (Business Logic Component) and that’s because the exactly same dilema as with the CLEAN architecture; It creates too much boilerplate code and adds a layer of complexity that I wouldn’t be surprised if it would make any newbie run in the other direction on sight.
Yes, I know that there are libraries and extensions that help to generate all this code, but precisely something I want to avoid is not understanding what my code is doing or depending on more libraries than necessary and then these are no longer supported (It has happened to me repeatedly).
Breaking news:
The best is what works for you.
The best is what you understand, is easy for you and you can apply.
Local database
With the state management debate over, the next stage led me to consider whether to continue using Hive as my local database or migrate to another project.
Something that I did not mention is that one of the criteria that I used to filter the libraries to use was that the project was actively developed, that is, the last update not older than 3–6 months.
Flutter has so many updates, due in large part to app store updates, that it’s very easy for a library to quickly fall behind.
I found that the Hive author “abandoned” this project to focus on Isar, his new database library with many improvements and such, but…
Yes, there is a big “but”.
Despite the improvements, constant development and other advantages, I found that Isar, it’s more focused on complex queries, jSon support, etc, and had no longer the same performance as Hive.
Added to this, the simplicity of saving key-value data was lost and it is because Isar aims to be a database engine and not a “simple” key-value data manager.
If you have read carefully up to this point, you can guess what my decision was…
You got it right, I stayed with Hive.
Network/API requests
For the API requests part, I stayed with Dio, which I had been using since the first version, but I decided to change dio_http_cache since this library has not been updated for 2 years. I replaced it with dio_cache_interceptor along with dio_cache_interceptor_hive_store and added dio_smart_retry along the way.
However, I was evaluating whether to use http package since it natively includes a library to retry queries: package:http/retry.dart
It also has dio_http_cache for cache management, however this library is 2 years old without an update, so I ended up deciding for Dio.
UI interface design
Finally for the design I decided to change that boring menu with too many options to a cleaner interface with navigation at the bottom using BottomNavigationBar() and an IndexedStack().
I added a search field. This was something I wanted to do for a long time, but now it was easier for me to create it thanks to Riverpod.
I also changed the category filter for a nicer one since before the articles were filtered with an ugly “drop-down” menu.
I added a carousel shortcut from the home to the contents saved in favorites. This only appears when you bookmark the first piece of content, leaving the interface even cleaner when you first use the app.
I also added a profile page where user preferences such as language, night mode and notifications are managed.
I kept other features like the text to speech, reading progress bar and kept the badge screen where I keep the gamification experience , but I separated the logging of content read and streak days into tabs using TabBar() and a TabBarView() . I think it looks cleaner that way.
And well this is all I changed so far.
How could you improve the app? Can you think of anything you can add or change to encourage the app usage? Let me know in the comments.
If you liked this post, please let me know in the comments. Feel free to clap and share however you want.
