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).

The clipper object class that is used for showing progress and animating the wave

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.

— 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!