Skip to main content

Flutter

Overview​

Flutter is Google’s UI toolkit for building compiled apps from a single Dart codebase targeting iOS, Android, web, and desktop. It uses widgets for everything (layout, painting, interaction) and Skia/Impeller for rendering.

Key concepts​

  • Widgets — Immutable descriptions of UI; StatefulWidget vs StatelessWidget.
  • Composition — Prefer small widgets over deep inheritance.
  • Hot reload — Fast iteration during development.
  • Platform channels — Call native APIs when needed.
  • State management — setState, Provider, Riverpod, Bloc—pick for scale.

Frame pipeline (simplified)​

Sample: counter widget​

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: CounterPage()));

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int n = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('$n', style: const TextStyle(fontSize: 48))),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => n++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

References​