Tự học Flutter 2023

New Flutter cơ bản

Tổng quan về một dự án Flutter

Trong bài viết này chúng ta sẽ tạo dự án Flutter đầu tiên, Hello World. Sau đó sẽ cùng tìm hiểu về cấu trúc của một dự án Flutter dựa trên dự án vừa tạo này.
Lưu ý rằng mình sử dụng VS Code trên window.

Tạo dự án Hello World

Tại thư mục bạn muốn tạo dự án, chạy lệnh sau đây:


flutter create hello_world
                      

Đợi một vài giây, ứng dụng Flutter mặc định sẽ được tạo ra cho bạn. Sau đó chuyển đến thư mục hello_world vừa được tạo ra rồi chạy lệnh code . để mở dự án bằng VS Code.


cd hello_world
code .
                      

Các thành phần của một dự án Flutter

Sau khi dự án được mở bằng VS Code, nhìn phía bên trái (Thanh Explorer) bạn sẽ thấy toàn bộ nội dung của dự án như hình. Lưu ý: bạn sẽ thấy một số thư mục khác nữa có tên bắt đầu bằng dấu ., tuy nhiên những thư mục này hiện không quan trọng bạn có thể bỏ qua và chỉ quan tâm đến những thư mục trong hình.

File pubspec.yalm

Đây là file chứa các thẻ dữ liệu về dự án (tên, mô tả), quy định về SDK của Dart và Flutter, quản lý các gói phụ thuộc (dependencies) và các cấu hình liên quan đến Flutter (font, image,... ).

File analysis_options.yalm

Đây là file config của flutter_lints. Flutter lints là package chứa các lint rules được đề xuất cho các ứng dụng, gói và plugin Flutter để khuyến khích thực hành các coding practices.

Lint rule đơn giản là các quy tắc cần làm theo để code tốt hơn. Nếu chúng ta vi phạm một rule nào đó, Dart sẽ thông báo ngay khi chúng ta viết code để chúng ta có thể sửa lại.

File này là nơi các bạn bật/tắt các rules, danh sách tất cả các rules được hỗ trợ có trên trang chủ của package.

Ví dụ, chúng ta có rule avoid_printđược bật mặc định. Ý nghĩa của rule này là chúng ta nên hạn chế sử dụng câu lệnh print trong production code. Vì vậy, nếu trong code chúng ta xuất hiện câu lệnh print, chúng ta sẽ nhận được thông báo như thế này:

Thư mục lib

Đây là thư mục chính của một dự án flutter. Chúng ta sẽ viết code (dart) ở đây.

Thư mục android

Đây là thư mục chứa code native Android.

Thư mục ios

Thư mục chứa code native iOS.

Thư mục window

Thư mục chứa code native Window.

Thư mục linux

Thư mục chứa code nativeLinux.

Thư mục macos

Thư mục chứa code native MacOS.

Thư mục web

Thư mục chứa code web.

Thư mục test

Thư mục chứa code liên quan đến testing.