Master Flutter: Build a Cross‑Platform Todo App with Dart and React Comparisons

Flutter Introduction

Flutter is Google's open‑source mobile UI framework that uses the Dart language. Its key features are cross‑platform capability, high performance, and high‑fidelity UI, allowing a single codebase to run on Android and iOS (Web support exists but performance is limited).

Flutter achieves cross‑platform rendering through a custom graphics engine that draws the UI as a bitmap, similar to a game engine or Java’s JVM. This approach brings some drawbacks, such as difficulty copying selected text.

Performance is high because Dart supports both JIT for fast development and AOT for fast release binaries.

Similar frameworks like Qt Mobile existed earlier, but Flutter gained popularity due to strong Google backing.

Dart Overview

Dart combines static‑typed syntax similar to Java with dynamic features of JavaScript, making it easy for developers familiar with Java or TypeScript to pick up.

Environment Setup

Install the Flutter SDK and use Android Studio or VS Code with the Flutter plugin.

Getting Started

Begin by comparing Flutter with React; both are declarative UI frameworks that follow UI = f(state). A simple Todo‑List example is used to illustrate the workflow.

Brief Design

Todo list page

Todo detail page

Start Coding

Project Structure

├── lib               // source files
│   ├── app.dart
│   ├── main.dart
│   ├── models
│   │   ├── todo.dart
│   │   └── todo_list.dart
│   └── pages
│       ├── detail
│       │   └── index.dart
│       └── list
│           └── index.dart
├── pubspec.yaml

Entry File

import 'package:flutter/material.dart';
import 'app.dart';

void main() {
  runApp(App());
}

Model Layer

Define a Todo class and a TodoList class that extends ChangeNotifier to provide state management.

class Todo {
  bool complete;
  final String id;
  final DateTime time;
  String task;

  Todo({this.task, this.complete = false, DateTime time, String id})
      : this.time = time ?? DateTime.now(),
        this.id = id ?? Uuid().v4();
}

Corresponding React code is shown for comparison.

Page Routing

Flutter uses Navigator for routing, analogous to React Router’s history. Named routes are demonstrated.

class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => TodoList()),
      ],
      child: MaterialApp(
        title: 'flutter todo list',
        initialRoute: '/',
        routes: {
          '/': (context) => ListPage(),
          '/list': (context) => ListPage(),
          '/detail': (context) => DetailPage(false),
          '/edit': (context) => DetailPage(true),
        },
      ),
    );
  }
}

Widgets

Flutter widgets correspond to React components. StatelessWidget and StatefulWidget map to functional and class components respectively. Custom widgets can be built with CustomPainter.

List Page

class ListPage extends StatelessWidget {
  const ListPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Todo List'), leading: Container()),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {/* TODO */},
      ),
      body: ListView.builder(
        itemCount: 0,
        itemBuilder: (context, index) => Container(),
      ),
    );
  }
}

Corresponding React JSX and non‑JSX snippets are provided.

State Management

Flutter’s Provider package works like React’s Context API. State changes are notified via notifyListeners().

Detail Page

Implemented with StatefulWidget to handle both creation and viewing of a Todo.

class DetailPage extends StatefulWidget {
  DetailPage(this._isCreate, {String curId}) {
    this._curId = curId;
  }

  final bool _isCreate;
  String _curId;

  @override
  _DetailPageState createState() => _DetailPageState();
}

Form validation, submission, and UI layout are shown.

Widget Lifecycle

initState – called when the widget is first inserted.

didChangeDependencies – called when inherited widgets change.

build – builds the widget tree.

reassemble – used during hot reload.

didUpdateWidget – called when the widget configuration changes.

deactivate – called when the widget is removed from the tree temporarily.

dispose – called when the widget is permanently removed.

With these pieces the complete cross‑platform Todo‑List application is finished.