Mobile

Flutter

Google's UI framework in Dart: one codebase for mobile, web and desktop with its own rendering.

Official siteRepository

What it is

Google created Flutter, with a first beta in 2017 and stable 1.0 at the end of 2018. Apps are written in Dart and compile to native code for iOS, Android, web, Windows, macOS and Linux.

Unlike React Native, Flutter does not use the platform's native widgets. It draws every pixel with its own engine (Impeller), so the look is identical across devices and fully controlled.

The UI is nested widgets: everything is a widget, from a button to padding. There is hot reload for instant updates during development and a rich library of Material and Cupertino widgets.

Use it when

  • You need an identical, fully custom UI on iOS and Android.
  • One codebase for mobile, desktop and web.
  • Animation-rich apps with a custom design.

Avoid it when

  • The team already knows React or JavaScript: Dart has to be learned.
  • You need strictly native-looking platform components.
  • Minimal app size: Flutter adds a runtime.

Key concepts

Widget
The basic UI unit: an immutable description of how a part of the screen looks.
StatelessWidget / StatefulWidget
Without state and with state that changes through setState.
Hot reload
Instantly applies code changes without losing app state.
Dart
A statically typed language with null safety that compiles AOT and JIT.
State management
Provider, Riverpod, Bloc: approaches to shared state.

Example

A stateful counter widget in Dart.

Interview questions

  1. 1. How does Flutter differ from React Native?

    Flutter draws UI with its own engine and uses Dart, while React Native maps to native platform views and uses JavaScript. Flutter gives an identical look, RN gives more native behavior.

  2. 2. StatelessWidget or StatefulWidget?

    Stateless has no mutable state and depends only on inputs. Stateful keeps state in a State object and rebuilds through setState.

  3. 3. What are the widget tree and Elements?

    Widgets are lightweight descriptions, and the Element tree keeps live instances and compares the old description with the new one, rebuilding only what is needed.

  4. 4. How is state managed in Flutter?

    setState is fine for simple state. For shared state use Provider, Riverpod or Bloc, which separate logic from UI.

Comparisons with this technology

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform