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! It’s the second part of my journal with Flutter. The first part can be found here.
If you are not interested in reading about setting up an Android environment and want only Flutter/Dart content, just skip this part and start reading from “My first widget”.
Environment
It’s time to finish configuring the environment so I can build and test my application on Android as well, and to do that I installed Android Studio. After running flutter doctor once again it told me I have not Flutter and Dart plugins installed yet — do I really need that if all I want is Android SDK and I am going to use VSC anyway for developing? Oh well… okay then, I will install it anyway to get rid off the warning (error?) shown by the doctor.
Started Android Studio for the first time — told me to download 1 GB of dependencies — okay, let’s do that… so far nothing complicated 😅 Once it completed asked a doctor again what to do next… it told me I have to accept Android licenses and suggested a command to do that — after accepting all licenses (wow, there is a lot of them, I wonder if there was some hero who read that all 🤓) finally everything was ready!
I have no idea what is wrong with my VS Code though? Showing details tells me that I have no Flutter plugin installed but I am pretty sure I do have it since I already ran Flutter app successfully, oh well, let’s not get into it too much. Might be an issue with a doctor and will be fixed before official release (Flutter is still in beta, keep remember).
Oh, wait… one more thing. One of the reasons I hate setting up Android Studio, why does it not install at least one emulator for me? In my opinion, it should be a default option or at least suggest me at the very start to install the recommended virtual device — I have no idea which one should I pick? Does it matter though? Okay, I choose you, Pixel 2! The whole installation process of the emulator is quite annoying as well 😓. I want to start developing without a goddamn real device, please, just give an option to install all recommendations for beginners (and/or lazy people who only want to test it for 5 minutes and not get too much into details). I don’t know… maybe my opinion about configuring Android environment is a little bit biased, it was not that much of a PAIN but it wasn’t pleasant either.
Wow, I hope I am not boring you with configuring the environment, but no worries, tried to run my “sample app” on the newly configured Android emulator and all works great! So it is time to get into Flutter and Dart!
My First Widget
Once again digged into Flutter’s docs and read few tutorials from Codelabs and Sample catalog pages, as well as started reading Building Layouts in Flutter — there is a lot of example in here. I don’t think so I got time for all of them, most likely I will only need few of those layout options anyway so will get back to it once I need that. I rather prefer “learning by doing” so I think I will just drop reading and start writing code 🔥
I am skipping the part about designing widget in Adobe XD since we all are not here to read about that I guess and I am just a newbie in designing UX so better for you (if you are interested) to read about that somewhere else ;)
The image below describes pretty much what I am going to try to achieve this time.
It will be a widget that represents glass — at first empty and slowly fill up with water (on pressing at it or so). Hopefully, I can make it animate nicely and would be great to make the water react (float) to phone’s sensors and move accordingly.
I tried to add a button with a glass’ image but first… how to load images from Assets? Quickly found a tutorial about that, although it did not work for me even though I think I did everything properly as the tutorial said. After an hour of debugging I eventually found out I either forgot to add a file’s extension or did not notice the full path to the image is required to load it. So much time wasted 😓 I guess I am used to Xcode’s assets loading where all I have to care about is a proper name and that’s all.
Btw. A very useful story about Flutter’s Layout by Tomek Polański can be found here.
So yeah, took me a while but finally got a button which is an empty glass 😎 What I hope will be improved (if already is not):
- allow loading resources just by its name and not the whole path
- skip file’s extension (unless there is the same name with different exts then yeah, should be required but otherwise should be resolved by itself)
- support for vector assets (PDF/SVG) — would be so much simpler to handle different resolutions
What next? Oh well, I realized I do not really want to show glass as an image and actually, I should paint it myself by implementing my own CustomPainter (or is that a mistake, hmm? Time will show ⌚️). Googled a little bit and found an example of creating CustomPainter on StackOverflow (It’s quite awesome that Google’s employees share code on SO).
After a while, I managed to draw a glass (without water yet) using Canvas and drawing lines and rectangles :)
Looks “almost” the same as the mockup from the Adobe XD project 👀 I am quite sure its performance is poor so probably will improve it later on once I am more familiar with Flutter and Dart. It’s time to fill the glass… let’s continue drawing lines and curves! 🖌
While implementing a wave for a water I found a nice article by Iiro Krankka about drawing beziers. Was really helpful and managed to draw such glass with a water inside… and an animation! At some later time, I will improve the animation to actually change the wave curve (float/move like a real water).
Hmm… so now it’s time to use device’s sensors — accelerometer and gyroscope (won’t need it for now, probably will add some eye-candy animation using that layer, but it’s a story for another time as well). Thankfully there already is a plugin that (thank you Flutter team!) makes it easy to use and on the Flutter Package page there is an awesome example of using that, sweet! ☺️ Added another dependency to the pubspec file — I love that by the way… Adding plugins is so quick and easy ❤.
Played with the accelerometer a little bit and eventually ended up with little glass movement while shaking a phone. Do not want to focus too much on the animation, for now, this is just one more thing on my “todo list” I’ll get back to once I am done with basic functions of the app — the plan is to make water float instead of shaking a glass ;)
I guess at some point I’ll just write a dedicated story for animations (and theme) in Flutter — gotta improve them a lot in my app.
Anyway, below you can see the current effect.
Conclusion
Uhh, finally did some coding and I still kinda like the language and SDK as well. Found out I can declare variables as var’s which type will be inferred (just like Swift ❤) so it kinda feels like writing in Swift (except semicolons 🌝) — what do you guys actually prefer though — inferred or explicitly declared variables? What about a keyword new — do you use it or rather omit? I am, also, really impressed there is already lots of plugins/libraries for many things and community is growing quickly — and I think it was much harder to find any useful examples for ReactNative when I tried it so it’s a huge ➕ for Flutter, especially for the beginners. Other than that… my code is messy as hell right now — or at least feels like that. Gotta read some good practices for Dart before I start developing next functionality — what do you think about Effective Dart, should we follow those or are there better examples?
Can not wait to dig more into the Flutter and I hope I will have enough time in next week to implement more interesting stuff! If you have any questions you can contact me by email, Twitter or just simply leave a comment below ;)
Thank you for reading!
Btw. I have no idea if it’s just me or is this actually an issue with VCS/Flutter/Dart but this error is getting annoying — each time I stop the debugger.
Check out the third part
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.
