Tạo ứng dụng Flutter đầu tiên

1. Tạo Project mới

Qua Terminal


# Tạo project với tên my_app
flutter create my_app
 
# Di chuyển vào thư mục
cd my_app

Qua VS Code

Mở Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Gõ Flutter: New Project
Chọn Application
Chọn thư mục lưu
Nhập tên project

2. Chạy ứng dụng


# Liệt kê devices
flutter devices
 
# Chạy app
flutter run

Hoặc trong VS Code: Nhấn F5 hoặc click Run → Start Debugging

3. Xem code mẫu

Mở file lib/main.dart:


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: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

4. Viết Hello World đơn giản

Thay thế nội dung lib/main.dart:


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(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello Flutter'),
          backgroundColor: Colors.blue,
        ),
        body: const Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Hot Reload: Nhấn r trong terminal hoặc Ctrl+S để thấy thay đổi ngay!

5. Giải thích code

`main()`


void main() {
  runApp(const MyApp());  // Entry point, khởi chạy MyApp widget
}

`MaterialApp`


MaterialApp(
  home: ...,  // Widget hiển thị đầu tiên
)

MaterialApp là widget gốc cung cấp:

Material Design theme
Navigation
Localization

`Scaffold`


Scaffold(
  appBar: AppBar(...),  // Thanh tiêu đề
  body: ...,            // Nội dung chính
)

Scaffold tạo cấu trúc trang cơ bản với app bar, body, floating button, v.v.

`Center` và `Text`


Center(                    // Widget căn giữa
  child: Text('Hello'),    // Widget hiển thị text
)

6. Thử thay đổi

Đổi màu và text


AppBar(
  title: const Text('Ứng dụng của tôi'),
  backgroundColor: Colors.green,  // Đổi màu
)

Thêm Icon


body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Icon(
        Icons.flutter_dash,
        size: 100,
        color: Colors.blue,
      ),
      const SizedBox(height: 20),
      const Text(
        'Chào mừng đến Flutter!',
        style: TextStyle(fontSize: 24),
      ),
    ],
  ),
),

7. Thêm Button tương tác


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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Button Demo')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button pressed!');
            },
            child: const Text('Click me'),
          ),
        ),
      ),
    );
  }
}

8. Debug Console

Khi chạy app, bạn có thể thấy output trong Debug Console:


flutter: Button pressed!

Sử dụng print() hoặc debugPrint() để debug.

📝 Tóm tắt

Command	Mô tả
`flutter create <name>`	Tạo project mới
`flutter run`	Chạy app
`r`	Hot reload
`R`	Hot restart
`q`	Thoát

Widget cơ bản đã học:

MaterialApp - App wrapper
Scaffold - Page structure
AppBar - Top bar
Center - Căn giữa
Text - Hiển thị text
ElevatedButton - Button