Bài 1: Giới thiệu Flutter & Dart

Flutter & Dart: Từ Cơ bản đến Nâng cao

Phần 1: Dart & Flutter Fundamentals

xdev.asia

1. Flutter là gì?

Flutter là UI toolkit của Google, cho phép xây dựng ứng dụng natively compiled trên mobile, web và desktop từ một codebase duy nhất. Flutter sử dụng Skia engine để render trực tiếp lên canvas, không phụ thuộc vào native widgets.

Framework	Engine	Ngôn ngữ	Ưu điểm
Flutter	Skia/Impeller	Dart	60fps, UI pixel-perfect
React Native	Native Bridge	JavaScript	Hệ sinh thái JS lớn
Kotlin Multiplatform	Native	Kotlin	Shared business logic

2. Cài đặt Flutter

# macOS
brew install --cask flutter

# Kiểm tra
flutter doctor
flutter --version

# Tạo project mới
flutter create my_app
cd my_app
flutter run

3. Ứng dụng đầu tiên

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Xin chào Flutter!')),
      body: const Center(
        child: Text('Hello World', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

4. Cấu trúc Project

my_app/
├── lib/
│   └── main.dart
├── test/
├── android/
├── ios/
├── web/
├── pubspec.yaml      # Dependencies
└── analysis_options.yaml

Bài tiếp theo: Dart Language Deep Dive.