An Introduction to Flutter: Architecture, State Management, and Dart Language Features

Flutter is a UI toolkit created by Google that builds on the Chrome 2D rendering engine (Skia) and the Dart language. It compiles Dart to native ARM code (AOT) or runs it in JIT mode, allowing fast UI rendering without a WebView and providing a single code base for iOS, Android, web, and desktop.

Why Flutter is fast

Skia engine renders directly to the canvas, bypassing platform bridges.

Dart can be AOT‑compiled to ARM, and its garbage collector is tuned for frequent widget creation.

Layout uses a CSS‑like Flex model, and the widget tree is diffed into a render object tree similar to React's Virtual DOM.

Comparison with React Native

RN runs JavaScript on a separate thread and communicates with native components via a JS bridge, which adds latency.

Flutter’s widgets are drawn by its own engine, giving more consistent performance across platforms.

Dart Language Highlights

Dart is a strongly‑typed language that supports both JIT and AOT compilation. It offers modern syntax such as null‑aware operators, cascade notation, and collection‑if/for.

// Cascade example
querySelect('#button')
  ..text = "Confirm"
  ..classes.add('important')
  ..onClick.listen((e) => window.alert('Confirmed'));

// Operator overload example
class Vector {
  final int x, y;
  Vector(this.x, this.y);
  Vector operator +(Vector v) => Vector(x + v.x, y + v.y);
  Vector operator -(Vector v) => Vector(x - v.x, y - v.y);
}

void main() {
  final v = Vector(2, 3);
  final w = Vector(2, 2);
  assert(v + w == Vector(4, 5));
  assert(v - w == Vector(0, 1));
}

State Management

Flutter provides several ways to manage UI state:

setState() : simple local state updates.

InheritedWidget : a lightweight way to expose data down the widget tree.

Bloc : combines InheritedWidget with RxDart streams for reactive state handling.

// InheritedWidget example
class GlobalData extends InheritedWidget {
  final int count;
  GlobalData({Key key, this.count, Widget child}) : super(key: key, child: child);
  @override
  bool updateShouldNotify(GlobalData old) => old.count != count;
  static GlobalData of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType
();
}

// Bloc example with StreamBuilder
class TimerView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final global = GlobalData.of(context);
    return StreamBuilder(
      stream: global.timeInterval$,
      builder: (c, snapshot) => Text(snapshot?.data ?? ''),
    );
  }
}

Testing

// Simple widget test
void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

Package Management

name: app
description: A new Flutter project.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2

Application Lifecycle

class _MyAppState extends State
with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.inactive:
        print('inactive');
        break;
      case AppLifecycleState.paused:
        print('paused');
        break;
      case AppLifecycleState.resumed:
        print('resumed');
        break;
      case AppLifecycleState.suspending:
        print('suspending');
        break;
    }
    super.didChangeAppLifecycleState(state);
  }
  @override
  Widget build(BuildContext context) => Container();
}

Platform Channels, Web & Desktop

Flutter can communicate with native code via platform channels, and the framework is expanding to support web and desktop targets, reusing the same Skia‑based rendering pipeline.