Flutter — Key Concepts, Architecture, and Widgets

What is Flutter

Flutter is an SDK (Software Development Kit) and framework for creating user interfaces, announced by Google in 2015. The first stable version of Flutter 1.0 was released in December 2018. Unlike React Native, Flutter does not use a bridge between JavaScript and native code — it compiles directly to native processor instructions.

The key feature of Flutter is its own rendering engine. The framework does not rely on UIKit (iOS) or Android’s View system. Instead, Flutter draws every pixel independently through Skia (before 2024) or the new Impeller engine. This guarantees a consistent appearance across all platforms and eliminates adaptation issues across different OS versions.

According to Statista 2024, Flutter ranks first among cross-platform frameworks in popularity: about 46% of developers use it for mobile development. The framework is used in projects by Google Pay, Alibaba, eBay, BMW, and Tencent.

History and Versions of Flutter

The first alpha version of Flutter was presented at the Dart Developer Summit in 2015 under the name Sky. In 2018, Flutter 1.0 was released with support for only iOS and Android. Flutter 2.0 (2021) added Web and Desktop support. Flutter 3.0 (2022) introduced stable support for macOS and Linux. Flutter 3.16 (2023) introduced Impeller — a new rendering engine based on Metal and Vulkan.

Flutter 3.22 (2024) includes Impeller by default on iOS, improved Material Design 3 support, Dart 3.4 with macro extensions, and built-in Native Assets support for direct access to platform resources. Google reports that Impeller reduces frame jank by 90% compared to Skia.

The Dart Language

Dart is a programming language created by Google in 2011 and used in Flutter. Dart combines strict typing with JIT compilation capabilities (for Hot Reload) and AOT compilation (for production builds). Dart 3.0 (2023) introduced pattern matching, sealed classes, and records as stable features.

Null safety in Dart is a mandatory feature introduced since version 2.12. The compiler checks all nullable types at build time, eliminating NullPointerException at runtime. Data types (int, String, bool) are non-nullable by default, and nullable values use the ? suffix (e.g., String? name).

Flutter Architecture

Flutter Architecture is built on a three-tier principle. The bottom layer is the engine (C/C++), responsible for rendering, I/O, and access to platform APIs. The middle layer is the framework (Dart), implementing the widget system, gestures, animations, and navigation. The top layer is the application (Dart), which assembles widgets into a tree.

Widgets and the Widget Tree

In Flutter, everything is a widget. Widgets come in two types: StatelessWidget (immutable, does not store state) and StatefulWidget (mutable, manages state through State). The Widget Tree is a hierarchical structure where each child widget is nested inside a parent. Scaffold, AppBar, Container, Text, Column, Row — these are the basic building blocks.

BuildContext is an object that communicates the widget’s position in the tree. MediaQuery.of(context) retrieves screen dimensions, Theme.of(context) retrieves the current theme. BuildContext is used for navigation (Navigator.of(context)), accessing InheritedWidget, and locale translation via Localizations.of.

The Impeller Engine

Impeller is Flutter’s modern rendering engine, written in C++ and using Metal (iOS/macOS) and Vulkan (Android). Unlike Skia, which redrew every frame from scratch, Impeller compiles shaders ahead of time and stores them in a cache. This eliminates delays during first-time rendering of complex scenes and reduces GPU load.

Google Flutter Team tests show that Impeller reduces shader compilation time from 200–500 ms (Skia) to 1–3 ms. On iPhone 13 Pro, Impeller’s impulse rendering achieves 120 FPS without frame drops. On Android with Vulkan, it delivers stable 60 FPS even on mid-range devices (Xiaomi Redmi Note 12).

Flutter Application Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter App')),
        body: const Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

Advantages of Flutter

Single codebase — the main advantage of Flutter. One Dart project compiles to iOS, Android, Web, Windows, macOS, and Linux. According to Google, this reduces development time by 30–50% compared to separate iOS and Android projects. Alibaba reduced version release time by 30% after switching to Flutter.

Performance of Flutter is close to native. AOT compilation of Dart into ARM and x86_64 machine code eliminates interpretation delays. The Impeller engine guarantees 60 FPS even on devices from 2018 (iPhone XR, Samsung Galaxy S9). According to Google, 99.5% of frames in Flutter applications render without jank.

Hot Reload — technology for instant code updates. The developer changes the source code, saves the file, and Flutter rebuilds the widget tree in 300–800 ms without losing the current application state. This speeds up UI design iterations: you can change margins, colors, and animations in seconds without waiting for a full rebuild.

Material Design 3 and the native Cupertino design language (iOS style) are included in the standard Flutter package. Material 3 widgets support dynamic colors (Material You), responsive layout, and screen transition animations. CupertinoPageTransition and CupertinoNavigationBar mimic native iOS navigator behavior.

Customization of widgets does not require creating custom Views on each platform. Simply override build() and return a new widget. The animation package (AnimatedContainer, Hero, TweenAnimationBuilder) and gesture package (GestureDetector, Dismissible) cover 95% of UI animation scenarios without writing platform code.

Flutter Ecosystem and Packages

pub.dev is the official package registry for Dart and Flutter. As of July 2024, over 45,000 packages are published in the registry. Installing a package is done with the command flutter pub add <package_name>. Pub automatically resolves dependencies, checks version compatibility, and generates pubspec.lock.

State management in Flutter is one of the key architectural challenges. Besides flutter_bloc, popular solutions include: Provider (recommended by Google, uses InheritedWidget), Riverpod (a redesigned version of Provider with compile-time safety), and GetX (all-in-one: state, routing, DI). Provider remains the simplest to start with: ChangeNotifierProvider wraps the model, and Consumer rebuilds the widget when data changes.

Testing in Flutter is supported at three levels. Unit tests (flutter test) check functions and classes without UI. Widget tests (testWidgets) render individual widgets in an isolated environment. Integration tests (IntegrationTest) run the full application on a device or simulator. Flutter 3.22 added support for patch tests through patch analytics and improved code coverage reporting.

Popular Packages

dio is an HTTP client with support for interceptors, timeouts, and FormData. Used in 40% of Flutter projects on GitHub. Dio supports request interception for logging, retries, and adding auth tokens. The second most popular library is retrofit, which generates typed API clients.

flutter_bloc is a state management library based on the BLoC (Business Logic Component) pattern. BlocProvider passes states down the widget tree, BlocBuilder rebuilds the UI when state changes, and BlocListener handles side effects (navigation, SnackBar). Cubit is a simplified version of BLoC without events.

go_router is declarative navigation for Flutter by Google. Routes are described in the GoRouter configuration with support for nested routes, redirects, and deep links. ShellRoute splits navigation across BottomNavigationBar tabs. GoRouter 14.0 supports type-safe paths and StatefulShellRoute with tab state preservation.