In which we discuss the potential and prospects of Flutter, the cross-platform tool from Google. When and where should we be thinking about it?

What is Flutter? 

Flutter is Google's open-source technology for creating cross-platform mobile, desktop, and web apps. A Flutter app can target iOS, Android, Web, Windows, Mac and Linux all from a single code base. It doesn’t stop there. It even supports embedded platforms, so you can include cars, TVs, refrigerators, thermostats and many more devices.  This means you can bring your app to market across platforms quickly and at less cost. 

Is Flutter Popular? 

You’ve probably used a Flutter app already and didn’t know it; while many businesses are using Flutter to build apps, so is Google itself. Google Ad Mob, Google Ads, Nest Hub and Google Pay are all using Flutter. This is reassuring that Flutter will have constant support and development far into the future. 

Currently most enterprise apps use React Native, but Flutter is fast gaining popularity. At the time of writing if we look at GitHub starts Flutter is ranked at 18 whilst React Native is 31. 

What’s Dart got to do with it? 

Flutter uses Google's programming language called Dart. It's easy to learn, especially for anyone familiar with C#, Java, JavaScript, or C++.  

What Dart brings is strictly-typed object-orientated language that supports sound null safely. What that means is more bugs get caught at build time which improves productivity and means fewer bugs to go back and fix.  

Does Flutter work the same as React Native or Xamarin? 

Flutter is not a wrapper over the native UI components like React Native or Xamarin. Instead, Flutter owns every pixel and draws the UI from scratch. There is no bridge to slow down performance. This enables it to render the same on all platforms at 60fps/120fps. 

What’s a Flutter Widget?

Flutter is all about widgets, in fact all objects in Flutter are widgets. This gives Flutter a consistent and unified object model. Out the box Flutter comes with a huge library of widgets, supporting both Material and Cupertino design. You use these widgets to build a widget tree that makes up the UI of your application. Of course, you can build your own widgets and install packages built to extend Dart and Flutter from pub.dev (https://pub.dev). 

What’s an adaptive layout? 

If you create an app that’s going to target multiple form factors you need to create an adaptive layout. That means the app can change its layout depending on the screen size, seamlessly switching from navigation draw to a system menu for example.  

It’s not just about the form factor, it’s also about the input types, mouse, keyboard or touch.  

Flutter comes with a bunch of widgets that help build adaptive layouts and effortlessly deal with the input type.  Even if you are only targeting mobile devices, adaptive layouts enable your apps to show their best side in portrait or landscape.  

I want my app to animate and look modern 

A well-designed animated application makes the UI feel better, and to make it happen Flutter has you covered, supporting implicit, explicit, low level and third-party animations.  

Progressive Web App Support 

Out the box a Flutter app that supports web is PWA enabled. For those not too sure what a PWA is, it is essentially a web app that looks and feels like it’s been installed on the device, with its own launch icon and access to some native features like push. PWAs have many advantages including bypassing the stores, automatic updates and offline mode.  

Platform specific 

If you need to implement code that is platform-specific, Flutter offers platform channels, packages that provide a common interface to the Flutter app, while implementing the platform specific code in the package per platform. On mobile devices you can also use the dart:ffi library to call native C APIs, so you can use C/C++ to build parts of your app as required.  

Flutter tool chain 

Flutter has a very good tool chain. It offers hot reload, which is key to speeding up development time. Hot reload enables a developer to write code and see the changes live. DevTools include performance view, CPU profiler, memory and network view and an app size tool that lets you dig into what’s taking up the space in your app. Flutter has built-in support for unit testing including testing UI interactions. 

What’s the connection to Fuchsia? 

Fuchsia is Google's new operating system, bringing all the advantages of Android and Chrome OS with it.  It works on all devices, including IoT devices. Flutter’s ability to adapt to different devices makes it perfect for developing Fuchsia UIs. In fact Google is endorsing Flutter as the main technology to build Fuchsia applications and user interfaces.  

Case Study 

A customer who had mobile apps and a web app, decided to go the Flutter route when redeveloping their in-house product. They didn’t have any Flutter developers and wanted to ensure they made the right decisions at the start of their development. They reached out to Matchbox to provide a Flutter consultant who helped them to get their app development off the ground fast, utilizing an adaptive layout. In just a few short months they went from nothing to a fully functional MVP, supporting Web, iOS and Android from a single source base.  

Summary 

Hybrid development is now the most popular way to build mobile applications. React Native has led the way for a number of years. Flutter is snapping at the heels of React Native as it supports a broader range of devices and operating systems from a single source base.  

We're excited to build more cool apps and software for and with our clients using Flutter. Get in touch if you are targeting embedded, mobile, web or desktop apps, and we will help you get to market quickly and cost-effectively. Good luck! 


B
The Author

Billy Leverington

Technical Lead
Technical leader and software developer, happiest when coding and problem solving
View Bio