Flutter là gì?

Flutter là framework open-source của Google, cho phép bạn xây dựng ứng dụng native cho iOS, Android, Web và Desktop từ một codebase Dart duy nhất. Thay vì dùng native UI components, Flutter tự vẽ toàn bộ UI bằng Skia/Impeller rendering engine — điều này mang lại performance cực cao và UI nhất quán trên mọi platform.

Setup môi trường

Trước tiên, cài Flutter SDK:

  1. Tải Flutter SDK tại flutter.dev
  2. Thêm vào PATH: export PATH="$PATH:/path/to/flutter/bin"
  3. Chạy flutter doctor để kiểm tra setup
  4. Cài Android Studio hoặc Xcode (hoặc cả hai)
shell
$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x)
[✓] Android toolchain
[✓] Xcode - develop for iOS and macOS
[✓] VS Code
[✓] Connected device (2 available)

Tạo project mới

bash
flutter create my_first_app
cd my_first_app
flutter run

Hiểu về Widget

Trong Flutter, mọi thứ đều là Widget. Text, button, padding, layout — tất cả đều là widget. Có hai loại chính:

  • StatelessWidget: UI không thay đổi, chỉ nhận data từ parent
  • StatefulWidget: Có state nội bộ, có thể rebuild khi state thay đổi
dart
// StatelessWidget đơn giản
class GreetingCard extends StatelessWidget {
  final String name;
  const GreetingCard({required this.name, super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(
          "Xin chào, $name!",
          style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Xây dựng app Todo đơn giản

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

  @override
  State<TodoApp> createState() => _TodoAppState();
}

class _TodoAppState extends State<TodoApp> {
  final List<String> _todos = [];
  final _controller = TextEditingController();

  void _addTodo() {
    if (_controller.text.isEmpty) return;
    setState(() {
      _todos.add(_controller.text);
      _controller.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Todo List")),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(hintText: "Thêm việc cần làm..."),
                  ),
                ),
                IconButton(icon: const Icon(Icons.add), onPressed: _addTodo),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _todos.length,
              itemBuilder: (context, index) => ListTile(
                title: Text(_todos[index]),
                trailing: IconButton(
                  icon: const Icon(Icons.delete),
                  onPressed: () => setState(() => _todos.removeAt(index)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Hot Reload — Siêu năng lực của Flutter

Một trong những tính năng yêu thích của mình là Hot Reload. Bạn thay đổi code, nhấn r trong terminal (hoặc Ctrl+S trong VS Code) — UI cập nhật ngay lập tức trong vòng chưa đến 1 giây, mà không cần restart app hay mất state hiện tại.

Kết luận

Flutter có learning curve nhất định nếu bạn chưa quen với Dart, nhưng sau khi hiểu concept về Widget tree và state management, năng suất phát triển tăng vọt. Với một codebase duy nhất, bạn có thể ship đồng thời lên iOS và Android — điều mà với team nhỏ hay cá nhân, đây là lợi thế cực kỳ lớn.