After the moment I got interested in Flutter I was looking for ideas for a simple app that solves a problem.
This post is a retrospection, two weeks after writing first lines of code.
Problem
Firstly, we need a problem to solve.
I was on shopping with my mom in a market. We were buying some stuff for the incoming Christmas. She had a list of products to buy on a piece of paper. Everything was okay with it, with one exception. After getting a few products in the basket, I realized that we are going from one end of the market to another several times already. I looked on this list and saw the problem.
The list wasn’t nicely written and reading it required some effort. Therefore, it wasn’t possible to quickly take a look at all the items on the list and put them in the basket at the moment you saw them. You had to read the list every time after collecting each product because you didn’t automatically memorize other stuff from the list.
Also, you should always remember to bring this list with you. If you happened to forget about it, you had a problem. You either try to remind yourself what was in it or call someone at home to send it to you.
The last problem that I’ve observed is looking at what is already in the basket and what is not. I bet you don’t have a pen with you to check or cross out already collected items. Because of that, from time to time you look on your list and check what you already have and what is still needed. It distracts you from your shopping and wastes your time.
Idea
My idea for solving those problems was really simple. Simple ideas are the best.
My mom needed a very clear and readable shopping list.
Photo by David Ballew on Unsplash
That’s it. The origin of the problem was the effort needed for reading the list and making sure to always bring it with you. If the list was easily readable, you would focus on collecting items from the list, not on the list itself.
Simple and intuitive controls would also help in making the distinction between items already in the basket and those that are still not collected.
All of it can be easily solved by using a mobile application addressing all the issues.
Implementation
I need to create an app. One, that will be extremely easy to use, intuitive, clear and NOT overwhelming at all.
When it comes to technology, the answer is simple. I chose Flutter. I needed simple functionality. Only one screen and two dialogs.
- Screen showing all your items.
- Dialog letting you add a new item.
- Dialog that confirms you want to delete an item.
My development suite.
I implemented this stuff. The only one screen consisted of a ListView showing each item in a ListTile. Tapping it would make the leading icon transform from a dash to check and change the background of the tile to green. Tapping again reversed that. Trailing widget was a remove IconButton that deleted the item from the list, after confirming it in a dialog. Besides that, there was a FloatingActionButton responsible for showing an Add new item dialog.
In case of an empty list, an Undraw illustration was shown.
Items were saved in a list in the app’s state. After every action, the list was saved to Shared Preferences as JSON and loaded at the app startup.
After that, I implemented localization, because I wanted the app to be in my mother language (Polish) and in English. This post helped me with it.
Flutter — Localization: step by step_If you’re reading this, you probably already know the benefits of making an internationalized app, like expand your…_proandroiddev.com
That was it in terms of the application itself. I created the launcher icon (orange text on white background) and wrote texts in Google Play Console. I published it to Alpha channel, sent to few friends and waited for their feedback. They didn’t encounter any problems and have liked its simplicity.
I published first production version. I asked my classmates to test this out and showed it to my mom. Both my classmates and my mom liked it. Well, she was amazed by it and forced her colleagues to download it too. 😁
I didn’t like the screenshots and launcher icon of the app at all. When I had some time I played a little bit with mockups, icons, and text in Adobe Xd and came up with some decent icon and new “screenshots”. I’ve combined two free for commercial use icons from Iconfinder and made the Google Play and launcher icon. “Screenshots” contain free to use Google Pixel 2 XL mockup I found online. I published version 1.0.1 with updated launcher icon.
Adobe Xd showing all my graphics for Google Play.
After a few days, I thought of new features that I could add. The app must be as simple as it was, but there were some minor problems with it. My mom explained to me that once she had some items checked as complete and she tapped delete all thinking, that it will delete only checked items, but she lost her whole list.
I changed the effect of the delete all button to delete completed because I thought that it’s more intuitive behavior. I added an Undo feature too. After you delete an item (or all completed items), a snackbar pops up for few seconds telling you about that and showing an Undo button.
Under the hood, I reimplemented how the products were stored in the memory. I refactored using states to using ScopedModel. After that, I published version 1.1.0 that is currently the most up to date version of the application.
You can download the app and check it out yourself!
Fast shopping — Apps on Google Play_When you make your shopping list you need simplicity. When you look at your shopping list you need clarity. Fast…_play.google.com
Download stats aren’t so bad after few days. I’m still looking for ways to promote my app to a broader audience.
You can also find the source code on GitHub, stars are welcome. 😏
Albert221/FastShopping_Simple application for easy shopping list making, for everyone. — Albert221/FastShopping_github.com