Live Coding Demo: Flutter Basics

📅 2022.05.08 - 👤 Borbély Viktor

On May 3rd, the Veszprém Technology Meetup (VTM) invited me as a guest speaker to talk about the advance of mobile crossplatform in 2022. Specifically about the Flutter framework, which has taken off recently and quickly became the favorite of mobile app developers. I gave a taste of Flutter possibilities within a spectacular live demo.

If you prefer the video format, you can watch it here my approximately 45-minute presentation with the live demo. In the article, I highlight the important parts that were discussed.

GitHub repo: https://github.com/vborbely/english_words

What is Flutter?

Flutter is a UI kit from Google that supports cross-platform development for Android, iOS, Web, desktop applications. Flutter was first introduced to the general public in 2017.

The framework’s language is Dart, which builds on modern foundations. It greatly resembles C# and Java languages, so it can be easily learned.

This was completed during the Flutter demo

The following video presents the finished application. This was completed during the demo, in approximately **25 minutes **.

Flutter demo app written cross-platform The finished Flutter demo app

Starting from the basics of how to create a project. By transforming the first scaffold, I created 2 screens.

The home screen (HomeScreen) is a list screen of random word pairs, where it remembers the words marked as favorites.

Then you could navigate to the favorites screen (FavouriteScreen), which presented this selected list.

The interesting part of the task was how to use other packages. It took simulated data from a storage commonly used in mobile apps, or from a remote API call. This is the so-called “mocked repository”.

It was also implemented that when we reached the bottom of the list, it “loaded” new elements from storage, a so-called “lazy loading” solution, or pagination.

Of course, the most amazing thing about the solution was that being cross-platform, the small demo app written ran without problems on iOS simulator, Chrome browser, and as a MacOS native desktop application. It also supports Linux and Windows desktop operating systems.

A testing demo also followed. Flutter supports Unit, Integration, and Widget tests. From these, I presented a special form of widget tests, Golden sample testing.

Golden testing is a testing procedure where we have a pixel-perfect image of our existing UI appearance in JPG, PNG format, and we compare the images created during testing to it. If we modify something in our application and the appearance changes and doesn’t match the sample image, the test fails.

Very good for automated testing. In the video starting from 28:30.

The Flutter framework’s market reception is very good. This is contributed to by the fact that with cross-platform frameworks, 50-70% savings are actually achievable. Half as many developers are needed. It’s not necessary to buy Mac computers for every developer, the cheaper x86-x64 architectures are also good.

For completing the final app, there are many online tools: CodeMagic.io, Bitrise.io, GitHub Actions, etc.

It’s a fact that in Hungary its acceptance started slowly, but in Western Europe they are already only looking for cross-platform developers (alongside React Native). Since there is great demand for developers, it will be easy to find varied tasks as a Freelancer.

Learning the framework is helped by the fact that it borrows a lot from existing frameworks: React Native, Android Jetpack Compose, Apple SwiftUI

As a FrontEnd developer, existing (team) knowledge is very reusable. If there’s no frontend background, it’s also good for those coming from BackEnd development or other fields, because it also serves as knowledge refreshment.

Such large car manufacturers as Toyota and BMW have recognized and started using it. They trust their infotainment onboard systems to it. Not surprising, since there’s continuous performance optimization: 60 FPS screen refresh rate; low memory requirement; etc.

Among banks, NuBank was the first to think big and start using it.

Game developers will love it because more and more support is coming for it (Rive, Flame). That it connects to hardware with a very thin layer and utilizes the CPU, this enthusiasm is not surprising.

Maybe Flutter is now a “hype” and won’t be good for everything, but yes for many things. It’s worth getting to know it because it faces a promising future.

The cross-platform method presented in the video should be applied as soon as possible in mobile app development projects. Of course, not only there!

If you’re still uncertain, have questions, don’t know how to start, then contact me through one of my contacts. I’m happy to discuss the possibilities and your needs with you.

If needed, I’ll start the project, working together with your existing team.