What is Flutter and Why You Should Learn it in 2020

Mobile app development is one of the most in-demand and fast-growing areas in programming today. Over the past decade, smartphones have become ubiquitous and mobile apps have become an integral part of our daily lives. For developers, this presents a huge opportunity – but also requires learning new frameworks and tools to efficiently build high-quality iOS and Android apps.

One technology that has been rapidly rising in popularity is Flutter – an open-source UI software development kit created by Google. Flutter enables you to build beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. In this article, we‘ll take a deep dive into what Flutter is, explore its key benefits and features, and discuss why it‘s a technology worth learning in 2020 and beyond.

What is Flutter?

At its core, Flutter is a mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android. The goal is to enable developers to deliver high-quality apps that feel natural on different platforms. This is achieved by using a single codebase – write your code once in Dart, and you get two apps!

Here are the main components of the Flutter SDK:

Flutter Engine – a high-performance, portable runtime for hosting Flutter applications. It implements core libraries including animation and graphics, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain.
Foundation Library – provides basic classes and functions that are used to construct applications using Flutter, such as APIs to communicate with the engine.
Widgets – the central class hierarchy in the Flutter framework. Widgets are the building blocks for creating user interfaces in Flutter. They are designed to be immutable, meaning that you can‘t change their properties after they‘ve been created. Instead, you modify the widget‘s state and then rebuild the widget tree.

Here‘s a simple "Hello, World!" example in Flutter:

import ‘package:flutter/material.dart‘;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘Welcome to Flutter‘,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(‘Welcome to Flutter‘),
        ),
        body: const Center(
          child: Text(‘Hello, World!‘),
        ),
      ),
    );
  }
}

One of the unique aspects of Flutter is that it doesn‘t rely on web views or the OEM widgets that shipped with the device. Instead, Flutter uses its own high-performance rendering engine to draw widgets. This gives developers a lot of flexibility and control over how their apps look and behave.

Key Benefits of Flutter

There are many reasons why Flutter has become so popular and why it‘s a great technology to learn. Let‘s explore some of the key benefits.

Dart Language

Flutter apps are written in Dart – a client-optimized programming language for fast apps on multiple platforms. It‘s developed by Google and is used to build mobile, desktop, backend and web applications.

Dart is an object-oriented, class-based, garbage-collected language with C-style syntax. It can compile to either native code or JavaScript. It supports interfaces, mixins, abstract classes, reified generics, and type inference.

If you‘re already familiar with languages like Java, JavaScript, C#, or Swift, then Dart will feel very comfortable. The language is easy to learn and developers can be productive with it in a short amount of time.

Productive Development

One of Flutter‘s most powerful features is its hot reload capability. With hot reload, you can quickly and easily experiment, build UIs, add features, and fix bugs faster. Modifications to your source files are injected into the running Dart Virtual Machine (VM) so most changes are visible immediately without losing app state.

Here‘s an example of making a change to the Flutter counter app with hot reload:

Flutter‘s hot reload is powered by Dart VM‘s incremental compilation and OS‘s ability to dynamically load code. Essentially, the Dart VM watches for changes in the source code files, and when a change is detected, it recompiles only the libraries with modified code, generates a delta of the changes, and sends the delta to the mobile device over a network connection. The Flutter framework then applies the code changes and rebuilds the widget tree.

Cross-Platform from Single Codebase

Another key benefit of Flutter is that you can use the same codebase to build applications for both iOS and Android. This is a massive time-saver compared to traditional native app development where separate teams are required to maintain two codebases in parallel.

With Flutter, you write your code once in Dart, and the Flutter framework takes care of translating that into native iOS and Android code. You get the benefits of native performance, native look and feel, and complete access to SDKs on both platforms – all from a single codebase.

Of course, Flutter also makes it easy to differentiate your UI by platform. You have complete control over every pixel and can tailor look and feel for each platform as needed. A single Flutter codebase can produce two entirely different looking apps if desired.

Beautiful, Responsive UIs

Creating beautiful user interfaces is a core focus of Flutter. It comes with a modern, extensible set of customizable widgets that make building responsive mobile UIs a breeze.

The Foundation library provides a wide array of basic widgets such as buttons, text, layout, images, and animation. On top of that, Flutter provides two sets of widgets that conform to specific design languages: Material Design (Android) and Cupertino (iOS). These widgets provide the standard look and feel of each platform out of the box.

But Flutter‘s widgets are extremely adaptable. You have full control over their appearance and behavior, so you can easily customize them to match your desired design system. The layered architecture gives you a lot of flexibility, ranging from using stock widgets as-is to full customization.

Native Performance

Flutter is designed to provide a smooth and responsive experience for users. By default, Flutter apps compile to native ARM code for both iOS and Android. The Flutter framework is optimized for mobile devices and takes advantage of hardware acceleration wherever possible.

Flutter also includes a rich set of platform APIs and services to access native features like the camera, geolocation, network, and storage. So in addition to high performance visuals, your Flutter apps can take full advantage of device capabilities just like native code.

Performance benchmarks have shown that Flutter apps perform very close to native apps in terms of speed and memory usage. In fact, you‘d be hard pressed to notice the difference between a well-built Flutter app and a native one.

According to the graphic, Flutter‘s performance is nearly identical to native iOS (Objective-C) and Android (Java) across multiple scenarios like scrolling speed, CPU usage, and memory allocation.

Perfect for MVPs and Startups

Building a mobile app is hard – building two apps is even harder. If you‘re a startup or solo developer looking to quickly launch an MVP, Flutter can save you a lot of time and effort.

Instead of building separate apps for iOS and Android, you can use Flutter to create a single app that looks and feels native on both platforms. You‘ll still need to put in the work to create a great user experience, but you won‘t have to worry about the complexities of each platform.

Flutter‘s quick development cycle is also ideal for launching MVPs. You can rapidly prototype, experiment, and iterate on your app without getting bogged down in long build times. Once you have a solid foundation, you can then gradually add more advanced features and polish.

Many startups have successfully launched apps using Flutter, including:

Postmuse – an Instagram planning and scheduling app
Reflectly – a personal journaling and mindfulness app
Birch Finance – a credit card rewards tracking app
Coach Yourself – a mobile coaching and training app

These are just a few examples of the types of apps that can be built with Flutter. Check out the Flutter Showcase for more.

Strong Community and Ecosystem

Despite being relatively new, Flutter has quickly grown to become one of the most popular open-source projects on GitHub. As of May 2020, Flutter has:

102,000+ stars
13,000+ forks
920+ contributors
27,000+ pub packages

This strong community means you‘ll be able find a wealth of resources to help you learn and build with Flutter. From documentation and video tutorials to open-source packages and plugins, the Flutter ecosystem is thriving.

Some of the best resources for keeping up with Flutter include:

Flutter documentation
Flutter YouTube channel
It‘s All Widgets! – an open list of apps built with Flutter
Awesome Flutter – a curated list of Flutter samples, packages, and projects
FlutterX – tutorials and articles for learning Flutter
r/FlutterDev – Flutter community on Reddit

The core Flutter team is also highly engaged with the community. They frequently release new versions, fix bugs, and implement new features based on community feedback. As the ecosystem continues to grow, you can expect even better support, tooling, and resources to help you succeed with Flutter.

Developer Tooling and IDE Support

Flutter comes with great developer tooling out of the box. The flutter command-line tool makes it easy to create, build, test, and run Flutter apps.

If you prefer visual IDEs, then you‘ll be happy to know that Flutter has excellent support for both Android Studio/IntelliJ and Visual Studio Code. Just install the Flutter and Dart plugins in your IDE of choice, and you‘ll get code completion, debugging, hot reload, and more.

The Flutter DevTools are another great resource for debugging and profiling your apps. It includes tools for inspecting the UI layout and state, diagnosing UI jank, debugging memory issues, and analyzing CPU usage.

How does Flutter compare to other frameworks?

When considering Flutter for your next project, it‘s worth comparing it to other popular cross-platform mobile development frameworks like React Native and Xamarin.

Here‘s a high-level comparison:

	Flutter	React Native	Xamarin
Language	Dart	JavaScript	C#
UI Components	Widgets	Native	Native
Cross-platform	iOS, Android, Web, Desktop	iOS, Android, Web	iOS, Android, Windows
Performance	Near-native	Near-native	Near-native
Hot Reload	Yes	Yes	No
Native APIs	Some	Some	Full

Compared to React Native, Flutter has a few key advantages. Flutter‘s widget system gives you more control over the look and feel of your app, and Flutter‘s Dart language is easier to learn and more performant than JavaScript. Flutter also has better support for building desktop and web apps.

Xamarin uses C# and native UI components, so it‘s a good choice if you already have a team experienced with .NET development. However, Xamarin lacks hot reload and doesn‘t have as large of a community as Flutter or React Native.

Ultimately, the "best" framework depends on your specific needs and goals. But for most projects, Flutter is a great choice that balances performance, productivity, and multi-platform support.

Learning Flutter

If you‘re sold on Flutter and want to start learning, there are a ton of great free and paid resources available.

Here are a few of my favorites:

Flutter Apprentice – a hands-on book that teaches you how to build four complete apps from scratch
The Complete Flutter Development Bootcamp Using Dart – a comprehensive video course that covers all the key concepts and techniques
Flutter Crash Course for Beginners – a free two-hour video tutorial that teaches the basics of Flutter and Dart
Flutter Docs Codelabs – step-by-step coding tutorials from the Flutter team
Flutter: Advanced Mobile Development – a video course that teaches advanced topics like state management, testing, and deployment

No matter your learning style, there are plenty of great resources to help you get started with Flutter. The key is to just dive in and start building!

Real-World Flutter Success Stories

To wrap things up, let‘s look at a few real-world examples of successful apps built with Flutter.

Google Ads

The Google Ads app helps you keep track of your ad campaigns on the go. It was one of the first major Flutter apps released by Google and helped validate Flutter‘s potential for large-scale production apps.

With Flutter, the Google Ads team was able to unify the codebase between iOS and Android, reduce development time, and create a smooth, responsive UX. They also used Flutter‘s declarative UI framework to make it easier to implement new design changes.

Nubank

Nubank is the largest digital bank outside of Asia with over 20 million customers. They chose Flutter to power their new app and help speed up development across iOS and Android.

"We found Flutter to be an excellent choice for our highly technical team of developers. They were able to quickly build high-quality features for both our iOS and Android apps. We‘re excited to continue investing in Flutter for mobile development at Nubank."
– Gavin Heydon, Engineering Manager at Nubank

Tencent

Tencent, the Chinese tech giant behind WeChat, built several new apps with Flutter, including AITeacher, Now Live, K12, Mr. Translator, and QiDian.

"The Flutter team and community have been amazing partners as we‘ve built our apps. Flutter has increased our efficiency and velocity as we develop beautiful designs and smooth animations, and we‘re excited to continue collaborating with the Flutter team as they build towards Flutter 2."
– Bruce Deng, Technology Director at Tencent

Check out the Flutter showcase for more examples of top apps built with Flutter.

Conclusion

In summary, Flutter is a powerful and flexible toolkit for building beautiful, natively-compiled, multi-platform apps from a single codebase. Its key benefits include:

Single Codebase – write once, deploy to iOS, Android, web, and desktop
Native Performance – compile to native ARM code and take advantage of hardware acceleration
Expressive, Flexible UI – build beautiful UIs with Flutter‘s rich set of customizable widgets
Hot Reload – instantly see the results of your changes without losing app state
Strong Community – leverage a thriving ecosystem of packages, plugins, tools, and support

If you‘re looking to get into mobile development or expand your skillset, learning Flutter is a great investment. Flutter skills are in high demand across startups and enterprises, and the community is growing rapidly.

To get started, I recommend checking out the Flutter Getting Started Guide and the learning resources mentioned above. Join the Flutter Community on Discord and start building your first Flutter app today!

With some dedication and hard work, you‘ll be a Flutter pro in no time. Thanks for reading, and happy coding!

What is Flutter and Why You Should Learn it in 2020

What is Flutter?