Devlog #3: Cài Đặt Ban Đầu Cho Một Flutter Project Mới

Thời gian đọc: 2 phút
mục lục

Tạo Nhanh Flutter Project Mới Trong VSCode

Đầu tiên, mở Command Palette của VSCode bằng tổ hợp Ctrl Shift P (Windows) hoặc Cmd Shift P (MacOS)

Sau đó gõ flutter new và chọn kết quả gợi ý đầu tiên Flutter: New project.

Tiếp theo, chọn loại template mà bạn muốn dựa vào để tạo Flutter project mới. Hãy chọn dòng thứ 2: Empty Application.

Tiếp theo, chọn folder cha để chứa folder project mà bạn chuẩn bị tạo.

Cuối cùng, điền tên của project, đồng thời cũng là tên của folder project sẽ được tạo ra bên trong folder cha mà bạn vừa chọn.

Chú ý tên project chỉ có thể gồm kí tự alphabet và dấu _.

Bằng cách này, bạn sẽ tạo ra được một Flutter project mới chứa ít code nhất có thể, hoàn toàn không có những comment và code ví dụ thừa thãi.

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Sử Dụng very_good_analysis

Mặc định, trong Flutter project mới đã áp dụng sẵn bộ analysis options của flutter_lints để giúp phát hiện những chỗ code xấu (không tuân thủ conventions, practices) trong project.

Nhưng bản thân mình thấy vẫn còn chưa đủ. Ví dụ, khi gọi một hàm trả về kiểu Future, nhiều khi mình quên không await. Nếu đang test ngay chỗ đó thì sẽ biết và sửa được ngay, nhưng nếu để bẵng đi một vài giờ, có khi sẽ không nhớ đến nữa và lại phải ngồi debug để biết tại sao code không chạy như kì vọng.

Vì vậy, mình thêm package very_good_analysis để có một bộ analysis options được trang bị sẵn đầy đủ hơn. Như ở trường hợp trên, nó sẽ nhắc nhở mình chưa await ngay chỗ gọi hàm đó.

Một Số Package Khác

Mục đíchPackage
Quản lý trạng tháiflutter_bloc
UI themecarbon_design_system (đang tự phát triển trong devlog #1devlog #2)
Iconscarbon_icons
Mình sẽ bổ sung các package khác sau khi hoàn thành một vài giao diện đầu tiên. Còn trước hết, mình sẽ phải vẽ phác thảo UI đã. Tiếp tục theo dõi trong bài tiếp nhé.