At least once month we come together for a full day at Sourcelabs to spend time together learning new things. For last Fridays edition, we planned looking into Flutter and Polymer. Two different technologies, but interesting nevertheless. Through democratic process we decided to start with Flutter and transition into Polymer in the afternoon.
The approach was going to be similar to our previous Sourcelabs meetup, where we first applied a mob programming approach to work together on understanding and discovering new technology, to concentrate our learning experience. If you haven’t tried mob programming yet, take it from us: it’s definitely worthwhile to try it at least once! It may not always fit your style or that of your team, but we have found it to be a refreshing approach that enabled us to learn at a higher pace. Asking each other questions, figuring out the inner workings of a framework by working with it together is just a lot of fun!
What the flutter
Flutter is a framework, created by Google, which enables you as a developer to create native apps for mobile (also web and desktop), all from a single codebase. The framework is based on the Dart programming language, which requires you to write your Flutter apps in it too. Luckily, the learning curve wasn’t too steep as it took us relatively little time to get used to Dart. Fortunately, this freed up time for us to focus on the main goal for this meetup: writing an app with Flutter.
First steps
First, we watched a video describing what Flutter is. Always good to get a feeling of a framework or tool by watching a video together. So save some of our precious time (and to cater to our short attention spans) youtube’s 1.5x speed option was heavily used.
Next step in the process was setting up our development environment. Plugin support for Intellij (the IDE we generally use) is pretty good for Flutter, but we had a laptop at our disposal which already had Android studio installed with most of the required extensions available so we started using it. On the Flutter website there’s plenty of useful documentation available, along with quick start tutorials which were very helpful in getting us started. We kicked off by following the tutorial writing your first Flutter app, from the Codelabs website, which resulted in the application below.
We were amazed by how easy it is to create a simple application with Flutter, which then behaved and looked like a regular native Android application. Flutter can style the components to follow the UI styles of the target platform with little effort, which for Android is Material Design. In Flutter, the UI elements are Widgets, and you build your application by nesting Widgets together. Having experimented with Android development in the past, the contrast could hardly be bigger.
As a final step, the “pièce de résistance” if you will, we added a tap action to the images in the grid, which opened a modal window with the large version of the image. The amount of code required and intuitive nature of the framework were both very impressive.
In the end, we never got around to trying Polymer, as we were so enthusiastic about creating an app with Flutter we started creating an app that would retrieve images from an online image service (https://loremflickr.com/). These images would then be loaded asynchronously and displayed in a grid view once available. While loading, we would display a spinner component. After spending some time figuring out how to do the async loading, setting up the components and presenting the images turned out to be very easy.
Takeaways
When we finished our (pretty useless) image API viewer app, we noticed it was already 17:00 o’clock, which meant we didn’t have time left to work on anything with Polymer. However, based on our experiences, we can truly recommend having a look at Flutter. It’s not error-free, and there will be moments of head-scratching, but all-in-all it was an enjoyable experience. The promise of being able to write multi-platform mobile apps is very enticing, and for at least a simple app like ours Flutter really seems to deliver. We don’t have any experience building more advanced apps though, so experiences may vary.
Mobbing our way around the framework also cemented our opinions of mob programming. It truly is a great, interactive way of learning. The setup gently forces you to focus on progressing through the code as a team, leaving room for the complete team to understand what is going on and to ask questions. Constantly rotating driver and navigator duties helps the team focus and keep up. You also end up behind the keyboard regularly so it’s not just watching and shouting instructions from the sidelines. I’ve said it before, but it really is true: give it a try, you might like it!
We closed off the day in traditional fashion, by having dinner together (sushi beats pizza anytime, just sayin’) and discussing what we did (and didn’t — Polymer — but there’s always next time) learn during the day.
