Mobile Framework Deep Dive

Flutter

Google's cross-platform UI toolkit. Renders its own pixel-identical UI on iOS, Android, web, desktop, and embedded — one Dart codebase, six platforms.

DartCross-platformCustom RendererAOT-compiledHot Reload
← Back to Client Side
Quick Facts

At a Glance

Language
Dart
Created
2017 · Google
Renders to
Skia / Impeller (own canvas)
Targets
iOS, Android, Web, macOS, Windows, Linux, embedded
Build
AOT to native binaries (JIT in dev)
Notable users
Google Pay, BMW, Alibaba, Toyota, eBay Motors

Basic Concepts

  • Everything is a widget — layout, padding, text, even the app itself.
  • Widget tree: immutable descriptions; Flutter diffs them and updates an underlying element tree.
  • Stateless vs Stateful widgets: the second carries a separate State object that survives rebuilds.
  • Own renderer: Flutter draws every pixel via Skia / Impeller — pixel-identical UI on every platform.
  • Hot reload: save a file, see changes in milliseconds while preserving state.
Syntax

Taste of Flutter

class ProductList extends StatefulWidget {
  @override
  State<ProductList> createState() => _ProductListState();
}

class _ProductListState extends State<ProductList> {
  List<Product> products = [];
  bool loading = true;

  @override
  void initState() {
    super.initState();
    _load();
  }

  Future<void> _load() async {
    final data = await api.fetchProducts();
    setState(() { products = data; loading = false; });
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text('Products')),
    body: loading
      ? const Center(child: CircularProgressIndicator())
      : ListView.builder(
          itemCount: products.length,
          itemBuilder: (_, i) => ListTile(
            title:    Text(products[i].name),
            trailing: Text('\$\${products[i].price}'),
          ),
        ),
  );
}
Mechanics

Key Features

The Rendering Pipeline

Flutter doesn't use platform UI components. It draws every pixel through its own engine (originally Skia, now Impeller). This guarantees pixel-perfect parity across iOS, Android, web, and desktop — at the cost of platform widgets that "feel" 100% native.

State Management
ApproachWhen to use
setStateLocal widget state.
ProviderRecommended for most apps.
RiverpodModern successor to Provider — type-safe, testable.
BLoCStream-based; popular in larger Flutter codebases.
GetX / MobXReactive alternatives.
Platform Channels

Need camera, biometrics, or any platform-only API? Flutter exposes platform channels — a typed bridge to write Swift/Kotlin code from Dart. Most common needs already have a community plugin on pub.dev.

Material & Cupertino Widgets

First-party widget sets that mimic Android (Material) and iOS (Cupertino) look-and-feel. Most teams use Material everywhere; Cupertino is available when iOS-native styling matters.

Ecosystem & Tooling
  • pub.dev — package registry (60k+ packages).
  • Flutter DevTools — inspector, performance, memory, network.
  • Firebase / Supabase — first-class backend integrations.
  • Flame — popular game engine on top of Flutter.
Trade-offs

Strengths & Weaknesses

Strengths
  • Truly identical UI on every platform.
  • Hot reload is best-in-class for iteration speed.
  • Excellent performance — AOT-compiled to native ARM.
  • Single codebase for mobile + desktop + web.
Weaknesses
  • Dart is a niche language outside Flutter.
  • Widgets aren't true native components — fidelity gaps with platform conventions.
  • Large initial app size compared to native.
  • Web support exists but lags React / Svelte for general-purpose web.
Where It Shines

Sweet Spots

Brand-Driven UIs

Custom design systems that should look identical everywhere.

Cross-Platform Mobile

Ship iOS + Android with one team.

In-Car / Embedded UIs

BMW, Toyota, GM use Flutter in dashboards.

Internal Tools

Mobile + desktop admin apps from one Dart codebase.

Continue

Other Mobile Frameworks

SwiftUIJetpack ComposeReact Native.NET MAUIKotlin MultiplatformIonic ↑ Back to Client Side