As a software developer, you know the problem: It’s no longer enough to just develop an ap­plic­a­tion for Windows. These days, apps also need to run on Android smart­phones, iOS devices, and web browsers to be suc­cess­ful.

In the past, you had to readjust and recompile the source code for each platform. In many cases, extensive rebuilds might be necessary to support the special features of the target platform and ensure that the user in­ter­faces of your app has the look and func­tion­al­ity that users are ac­cus­tomed to. Flutter sim­pli­fies cross-platform de­vel­op­ment because you only need one codebase for all platforms.

What is Flutter?

Flutter is a framework for de­vel­op­ing apps for different platforms. It was created by the Google’s developer community and first released as an open-source project in late 2018. Flutter offers a variety of libraries of standard UI elements from Android and iOS, but it can also be used for de­vel­op­ing tra­di­tion­al desktop web ap­plic­a­tions. Apps developed with Flutter look and behave like apps native to their target platforms. However, as a pro­gram­mer, you don’t need to take into account the specifics of these platforms.

What is Flutter used for?

Flutter is primarily used for de­vel­op­ing Android and iOS apps without having to write a separate codebase for each of the two different platforms. The smart­phone versions of the apps run as real native apps on these devices. They are compiled for each platform before release, so you don’t need a runtime module or a browser. You can use the same codebase to create Web apps for browsers and native ap­plic­a­tions for Windows, Linux, and macOS.

Google uses Flutter for various modules of the Google Assistant and the user interface of the Google Home Hub. Popular e-commerce providers such as eBay, Groupon or the Alibaba Group also use Flutter to lend their web apps and mobile apps a uniform look and feel.

What pro­gram­ming language is Flutter based on?

The Flutter SDK is based on Google’s Dart pro­gram­ming language, which was initially intended as a re­place­ment for JavaS­cript. Just like the popular web scripting language, Dart also runs as a web app directly in a browser. Dart ap­plic­a­tions can run on a server. When run in a web browser, they are im­ple­men­ted in JavaS­cript using the Dart2js transcom­piler. The apps for Google’s new Fuchsia platform are developed in Dart, which is similar in structure to well-known object-oriented pro­gram­ming languages like Java or C #.

Tip

See our Dart pro­gram­ming tutorial for more detailed in­form­a­tion on pro­gram­ming with Dart.

Everything’s a widget – the Flutter concept

Flutter’s 'Everything is a widget' strategy uses object-oriented pro­gram­ming for everything, including the user interface. The interface of an ap­plic­a­tion consists of various nestable widgets. Every button and displayed text is a widget which has different prop­er­ties that can be changed. They can influence each other and use built-in functions to react to external state changes. Widgets are included for all important elements of the UI and meet the design spe­cific­a­tions of Android and iOS or common web ap­plic­a­tions. If necessary, you can extend the func­tion­al­ity of these widgets or create custom widgets that can be seam­lessly combined with existing widgets.

The widgets offer much greater flex­ib­il­ity compared to the tools of other SDKs, but their dis­ad­vant­age is that all widgets are contained in the source code of the ap­plic­a­tion. This creates deeply nested code that can easily become confusing.

Some simple Flutter examples

The de­velopers provide numerous examples of Flutter so you can get started right away. A simple 'Hello World' project shows the basic structure of an ap­plic­a­tion with a widget and a simple void Main() function that starts the ap­plic­a­tion.

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
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: Text('Welcome to Flutter'),
			),
			body: Center(
				child: Text('Hello World'),
			),
	),
		);
	}
}

On a smart­phone or in the smart­phone sim­u­la­tion, the ap­plic­a­tion displays the 'Welcome to Flutter' title bar from the AppBar() element of the widget. The text 'Hello World' appears in the centre of the screen below the title. This open area of the screen is called the body in Flutter.

Image: Simple 'Hello World' app developed with Flutter
A simple 'Hello World' ap­plic­a­tion in Flutter.

In­ter­act­ive examples show Flutter apps along with the Dart source code directly in the browser. These examples allow you to change the source code in­ter­act­ively and observe the effects in the app.

Image: Example of Flutter in a browser
Simple demo ap­plic­a­tions developed with Flutter in a browser

The Flutter Gallery is a col­lec­tion of sample apps that show you how to use standard widgets. As is common for open-source projects, Google de­lib­er­ately avoided the brand names Android and iOS when it named the cat­egor­ies of UI elements. As a result, the widgets are named 'Ma­ter­i­al' (after Google’s design language) and 'Cu­per­tino' (after Apple’s headquar­ters).

Image: Flutter Gallery: Overview
Flutter Gallery with examples of how to use UI elements
Tip

The Flutter team maintains a large col­lec­tion of sample apps and tutorials on GitHub to help you get started with Flutter de­vel­op­ment.

What do you need to develop apps with Flutter?

All the libraries and command line tools you’ll need for de­vel­op­ing software with Flutter are in the Flutter SDK, which you can download for free from the official flutter.dev website. The Software De­vel­op­ment Kit does not have its own graphical IDE, but you can use any text editor to write the source code. Google re­com­mends in­stalling Android Studio for easier pro­gram­ming. Flutter provides plug-ins for Android Studio to allow for easy in­teg­ra­tion of libraries and automatic syntax high­light­ing in the editor. Com­par­able plug-ins are also available for the Microsoft Visual Studio Code de­vel­op­ment en­vir­on­ment.

Note

You can find more detailed in­form­a­tion on in­stall­a­tion as well as pro­gram­ming with Flutter in our Flutter tutorial for beginners.

Pros and cons of Flutter

Every SDK and pro­gram­ming language has its ad­vant­ages and dis­ad­vant­ages. In summary, Flutter’s ad­vant­ages outweigh those of similar systems.

Ad­vant­ages of Flutter

  • One codebase for all major target platforms
  • Dart pro­gram­ming language is easy to learn for those with little pro­gram­ming ex­per­i­ence
  • The 'Everything is a widget' concept offers a wealth of pos­sib­il­it­ies
  • Native apps run smoothly on smart­phones
  • Extensive libraries of ready-to-use UI elements
  • Easy im­ple­ment­a­tion of data streams so that users always have up-to-date in­form­a­tion
  • Hot Reload feature ac­cel­er­ates testing during de­vel­op­ment

Dis­ad­vant­ages of Flutter

  • Code is slightly confusing due to widget in­teg­ra­tion
  • Flutter modules must be updated when the design spe­cific­a­tions of operating systems change. Since modules are embedded in the ap­plic­a­tion, it too must be re­com­piled and installed on devices.
  • Fairly new language that is not yet very wide­spread; community is still small
Go to Main Menu