My Flutter IoT Journey (Part 1)
Christmas time at my grandparents house is usually very relaxing. There isn’t much to do, nothing to worry about — pure relaxation!
As I was sitting on their comfortable buffalo leather couch and scrolling through my Instagram feed, I saw a post of an old school mate that I knew from elementary school. The post consisted of an RGB LED Matrix, and an Arduino Uno. As a software developer, I was intrigued to find out what he was doing with it.
So, I went into my DMs and asked him what exactly it was that he was trying to achieve. He told me that he wanted to be able to control the LED Matrix in a way, so that the LEDs light up corresponding to the time of day, similar to how the QLOCKTWO shows the time.
If you haven’t heard of the QLOCKTWO, it’s a premium product that shows the time in a sort of crossword puzzle. You can find out more about it on their website: https://qlocktwo.com/en/. He said that his problem was, that he didn’t know how to program anything. As this project seemed interesting, and something that I could learn from, I offered to write the software for him.
A few weeks went by, and by the time that I had all the hardware I needed to start, I jumped into programming the basic code. I sat down for a brainstorming session of how to achieve the same functionality, as the QLOCKTWO. I saw that I could easily solve this problem in an OOP way, and decided to create C++ class that contained the following data:
- An element type, to say if the object is either a display for hours or minutes
- An array of numeric representations of the object
- The starting index of the word to be displayed
- The ending index of the word to be displayed
After an hour of planning how to implement this solution, I set off into the Arduino IDE to implement it. At 2 AM in the morning, I finally finished the basic implementation, and smiled at my success.
The next day, I told my friend of my success, but that I didn’t want to stop there. There was another idea on my mind: I wanted to create a mobile app that connected to the clock over Bluetooth, so that the user can control the colour of the displayed words, set the time of the clock, and choose from a few modes, such as rainbow mode, where the words light up one after another, in an animated rainbow, or something like a breathing mode, where the brightness of the LEDs goes from low to high, and then back down to low, slowly.
I went to my favourite design tools, Figma, and came up with a simple and sleek design, that makes it easy to control the clocks LEDs.
After showing my friend the design, he was so impressed that he said he couldn’t wait to have the app in his hands, and test it out for himself.
The next step was choose a framework to use to implement this app. I’ve had my fair share of experiences with native development, and am simply not enthusiastic about implementing native apps. Android makes is too complicated with its XML layouts and code bindings with findById, which gets super annoying after having to write it thousands of times. With native iOS development, I had too little experience to feel comfortable implementing the app.
So I turned to cross platform mobile frameworks. I researched the available frameworks, and had also heard of a few, including React Native. I created a little app with React Native, and quickly found that it was lacking the widgets that I wanted to make my life as an app developer easy. The next framework I checked out was Flutter. Flutter was different….
I quickly fell in love with Flutter. The amount of built in widgets that come with the framework is incredible. I felt like a kid in a candy shop, with such a large selection of widgets to choose from. From the simple Center widget, to the more fun AnimatedContainers — the possibilities were endless.
Here’s how I created a simple splash screen, with a logo that fades in:
The splash screen uses an an AnimatedOpacity, which interpolates the values from a start value to an end value, with a given duration. The Center widget just takes care that the fading logo, is in the center of the screen. Amazing how simple it is, isn’t it?
Flutter allowed me to create the UI for this app, easily. I noticed how fast it was to get a beautiful UI up and running, using the built in widgets. As for the performance of the app, I wasn’t sure what to expect. However, when I launched my application on my Honor 7x, I noticed no difference between an app written with Java, and an app developed with Flutter and Dart.
When I finished the UI, I was ready to start sending data to the clock, using Bluetooth. I was worried that I would have to write the functionality of connecting to the Bluetooth module myself, since Flutter is relatively new and is said to not have enough pre-built packages, that you can use to take some work off your hands. However, I was positively surprised! After googling “flutter bluetooth”, the first search result that came up was a package that took this work off of my hands: flutter_blue.
Flutter_blue allows you to connect to Bluetooth 4.0 devices, without having to write any much code. You simply scan for devices, connect to one of the ones found, and you’re ready to go.
Listening to connection changes is super simple too, thanks to the amazing work done by Paul Demarco. Here’s an example:
So, finding and connecting to the clock was no problem at all. The only thing left to do was figuring out how to format the data, in such a way that it would be easy to parse on the Arduino side of things.
The simplest solution, was to send a command formatted as a method. For example, setting the color for the LEDs looks like this: “setColor($r,$g,$b)”, where the $r, $g, $b are placeholders that dart replaces with variables with the same name.
The clock isn’t completely finished yet, since the app still needs some UnitTests, simple animations to improve user experience, and the clock needs to be tested thoroughly, but I will keep you posted on the final steps that we need to take, to get this finished.
As for Flutter, I think I will be using it more in the future, since building a beautiful and simple UI, requires little to no work. I am really amazed at how simple the Flutter team has made app development! So cheers to the Flutter team :D
Lastly, if you want to follow the updates on Github, as well as on here, check out the project. It can be found here.
