Jul
26
2019

Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.

What is Flutter?

Flutter is a mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase.

The goal is to enable developers to deliver high-performance apps that feel natural on different platforms. We embrace differences in scrolling behaviors, typography, icons, and more.

No mobile development experience is required to get started. Apps are written in Dart, which looks familiar if you’ve used a language like Java or JavaScript. Experience with object-oriented languages is definitely helpful, but even non-programmers have made Flutter apps!

Why use Flutter?
Here are some advantages of Flutter:

    • Be highly productive
      • Prototype and iterate easily
        • Experiment by changing code and reloading as your app runs (with hot reload)
        • Fix crashes and continue debugging from where the app left off
    • Create beautiful, highly-customized user experiences
      • Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework
      • Realize custom, beautiful, brand-driven designs, without the limitations of OEM widget sets


Core principles

Flutter includes a modern react-style framework, a 2D rendering engine, ready-made widgets, and development tools. These components work together to help you design, build, test, and debug apps. Everything is organized around a few core principles.

Everything’s a Widget
Widgets are the basic building blocks of a Flutter app’s user interface. Each widget is an immutable declaration of part of the user interface. Unlike other frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget.

A widget can define:

      • a structural element (like a button or menu)
      • a stylistic element (like a font or color scheme)
      • an aspect of the layout (like padding)
      • and so on…

Widgets form a hierarchy based on composition. Each widget nests inside, and inherits properties from, its parent. There is no separate “application” object. Instead, the root widget serves this role.

You can respond to events, like user interaction, by telling the framework to replace a widget in the hierarchy with another widget. The framework then compares the new and old widgets and efficiently updates the user interface.

Building widgets
You define the unique characteristics of a widget by implementing a build function that returns a tree (or hierarchy) of widgets. This tree represents the widget’s part of the user interface in more concrete terms. For example, a toolbar widget might have a build function that returns a horizontal layout of some text and various buttons. The framework then recursively asks each of these widgets to build until the process bottoms out in fully concrete widgets, which the framework then stitches together into a tree.

Handling user interaction
If the unique characteristics of a widget need to change based on user interaction or other factors, that widget is stateful. For example, if a widget has a counter that increments whenever the user taps a button, the value of the counter is the state for that widget. When that value changes, the widget needs to be rebuilt to update the UI.