Hello Flutter

Flutter 是 Google 推出的跨平台 UI 框架，使用 Dart 语言编写，可以同时构建 iOS、Android、Web 和桌面应用。

Why Flutter?

Flutter 不仅仅是一个 UI 框架，它改变了我们思考跨平台开发的方式。 一套代码，多端运行，性能接近原生。

Key Advantages

• Hot Reload — 修改代码后即时看到效果
• 丰富的 Widget 库 — Material Design 和 Cupertino 风格
• 高性能渲染 — 使用 Skia/Impeller 引擎直接绘制
• 强大的社区 — pub.dev 上有数万个 packages

Getting Started

1. Install Flutter

First, download and install the Flutter SDK:

# macOS (using Homebrew)
brew install flutter

# Verify installation
flutter doctor

2. Create Your First App

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(
      title: 'Hello Flutter',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My First App')),
      body: Center(
        child: Text(
          'Count: $_counter',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Integrating with TypeScript Backend

If you have a backend written in TypeScript, here is how you might define an API client:

interface FlutterAppConfig {
  apiBaseUrl: string;
  version: string;
  features: string[];
}

async function fetchConfig(): Promise<FlutterAppConfig> {
  const response = await fetch('/api/config');
  return response.json() as Promise<FlutterAppConfig>;
}

Widget Comparison Table

Widget	Use Case	Performance
ListView	Scrollable lists	Good for small lists
ListView.builder	Large/infinite lists	Excellent — lazy loading
GridView	Grid layouts	Good
CustomScrollView	Complex scroll effects	Excellent

State Management Options

1. setState — Simple, built-in, good for local state
2. Provider — Recommended by Flutter team
3. Riverpod — Type-safe, testable, no context needed
4. Bloc — Enterprise-grade, event-driven

Resources

• Flutter Official Docs
• Dart Language Tour
• pub.dev — Package repository

---

Happy Fluttering!