I have created my own blog and all new articles will be available there — Ordinary Coding. Feel free to read it here or check out my blog.
Hello again! I do now know if you noticed that I have not been active for a little bit longer (used to publish 1 article a week) but I was on vacation, so sorry about that!
It’s the fifth part of my journey with Flutter. This one is the last one from this series about beginning with Flutter. I really hope you enjoyed my other stories and that is why you are back here 😅. If you have not seen my previous Flutter articles yet, you can find them right here:
TL;DR: If you are not interested in the technical stuff how I implemented a few things just jump to the last part where I wrote the cons and pros of Flutter in my opinion. Also if you want to see how it works on the real device you can find there a link to the app (Google Play/Android) as well.
Open Source
09.11.2019: I have decided to open source it. You can check it out here:
https://github.com/artrmz/watermaniac
Also, check my other open sourced project — Expenses Pal!
https://github.com/artrmz/expenses-pal
Redesign 🖌
The time for a redesign of the application has come. I have designed it in Gravit Designer and since I am not really experienced with UI/UX it is still, not the best app design you will ever see 🌝
Below you can see the final design of the app (for now at least). It’s not that great but I think it’s good enough to finish my series which were purely supposed to give me a content for learning Google’s Flutter.
The base of the app is made of a Stack that contains the top image and a container that contains main content of the page. Refactoring the app to use iOS’s style widgets was the simplest thing ever — just replaced Material widgets with Cupertino ones, adjusted parameters a little bit and pretty much all worked. I really love that in Flutter — juggling views (widgets) is really easy and do not have to worry about setting up constraints (referring to iOS) each time I move something in the view’s hierarchy. I really consider writing an layout library in Swift for iOS that will work similarly to Flutter’s widgets — or maybe is there already one?
The History, Notifications, and Settings views are quite simple. Created a simple widget which is a Container with a shadow and contains a child shown inside it.
Nothing really to explain here, it is straightforward 👌. This widget is used as a parent for most widgets you can see on the screenshots.
Let’s focus on the Home screen though since it is more interesting. You can notice three main sectors here — a short history on the drop, drink progress in the middle and menu on the bottom of the screen.
The short history widget is a simple one — it is just a text wrapped by ShadowText. Each time a drink is added it redraws itself, reads history entries from the database and shows the last 3 ones.
Drink Menu
The menu used for adding a drink to the daily progress consists a main (toggle) button that after tapping shows options for water amount to add — those buttons are just objects of FloatingActionButton widget. The toggle button is a GestureDedector with an image as a child since the icon was created in Gravit Designer.
Tapping on the toggle button calls the “toggle menu action” that shows or hides the extra buttons (water amounts). To make it look smoother I added a toggle animation as well.
It creates an animation controller with a duration of half a second and adds Tween animation which value is used to determine the position of those amount buttons.
Also added little bubbles around the toggle button that moves slowly from the center to the outside and disappears. It is done using CustomPainter and AnimationController.
It generates 5 bubbles (bubble is just a circle with a gradient, it also has a property of its life and radius that is random). Each time the listener is called it reduces bubble’s life and changes its location on the screen.
This is pretty much that about the menu, really simple one. Might improve it in the future though. If anyone would like a tutorial on how I have done it exactly I can write that but there is already plenty of (better) examples out there 🔥
Water Drop
A wave effect on the drop is created by stacking two drops together and adding a clipper with a wave path to the one that is on top.
And the wave animation is — you are right — once again made with AnimationController. As the time of animation passes, I generate clip path with a help of sin function from math library with an x offset that depends on the animation’s value (time).
Pros and cons
Since it is the last article of the series, it is a perfect time to sum up the pros and cons of working in Flutter (in my eyes).
Pros
- open-source
- dart is quite easy to learn
- writing for Android and iOS
- performance does not seem that bad compared to writing natively in Swift/Kotlin (does not require JavaScript as a bridge)
- it is really quick to create a simple app that can be shown to a client
- the app (can but do not have to since there are widgets that conforms to iOS and Android guidelines) looks the same on all the devices and systems
- creating widgets is really straightforward, can move views/widgets around without much hassle
- defining dependencies (plugins) is awesome
- animations making is great, some issues with them (referring to iOS: like resuming them after coming back from the background) are already resolved in the Flutter’s SDK
- works on any (except building iOS) system — so you do not have to own Mac to create an iOS app — just ask a friend to build it for you later ;)
- HOT RELOAD — do I need to explain that? It really speeds up the development.
- awesome community — everyone talks about Flutter on Twitter, Facebook, StackOverflow so getting help is usually quick 👏
Cons
- if anyone thinks about Flutter and Dart as his main language to use at work then it’s probably not gonna happen anytime soon, still, need some time before companies start noticing benefits of writing mobile apps in Flutter
- it’s still in beta so code-breaking changes might still appear
- there are not that many plugins yet and most of them are not official — using them might be risky since you never know if the person who created it will stick to Flutter and maintain it
- updates to iOS (Xcode)/Android might break apps building — just like it happened with Xcode 10 update so need to keep both versions of Xcode until it gets fixed (in beta branch)
- it feels like a few things I could do a way better and faster in Swift
- it takes time to get comfortable in creating layout/views using widgets
Overall I think it is worth giving Flutter and Dart a try. I had a lot of fun and it has been a great experience. As an iOS Developer, I have learned a lot about Android and I think it will be easier for me to create an Android app in Kotlin as well — might actually give it a try in my next series.
Final words
I am still not sure about the performance of the animations on the Home page — I hope they are not too much for a mobile’s CPU. If there will be any issues with that I will try to improve that. Also, history’s performance is not that great either since I think it rebuilds too much while using Redux architecture so have to improve that one as well.
Anyway, the application is available on the Google Play right now.
I did not get my personal Apple Developer Account yet so have not uploaded it there, will do that once I find out if it is worth spending $100 to release this app to the AppStore — will not do that if there is no one interested into using that ;)
If you got an Android device feel free to give it a try and let me know if you like it or not and what can I improve.
Also if you would like to know how I implemented certain widget in the app leave a comment and if enough people are interested I will write a tutorial about that or maybe even… open source it 😈
If you have any questions you can contact me by email, Twitter or just simply leave a comment below ;)
Thank you for reading!
Open Source
09.11.2019: I have decided to open source it. You can check it out here:
Also, check my other open sourced project — Expenses Pal!
The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.
