Xin chào các bạn! Bài viết hôm nay tiếp tục là một chủ đề về Flutter.
Nếu các bạn đã đọc được bài viết trước của mình ở đây thì đã biết mình là ai. Còn nếu chưa (nhưng mà mình khuyên chân thành là các bạn nên đọc bài trước vì bài này có nội dung liên quan đến bài trước đó!) thì mình xin tự giới thiệu lại lần nữa. Mình là Lê Hồng Vân, là dev iOS và mới tự mày mò, tìm hiểu Flutter được nửa năm nay. Trong tương lai, mình dự định sẽ có một bài chia sẻ về quá trình tự học của mình để những ai cũng có mong muốn tự học hỏi như mình sẽ tích luỹ được chút kinh nghiệm cho quá trình tự học của bản thân. Các bạn cùng đón chờ nhé!
Follow me more:
 |
 |
 |
|---|
- IDE:
- VSCode version 1.67.0
- Android Studio Bumblebee version 2021.1.1 Patch 3
- XCode version 13.3.1
- Flutter SDK version 2.10.5
- VS Code giúp bạn đơn giản hoá việc khởi chạy và debug các cấu hình custom của app. Để làm được điều đó, VS Code sẽ đọc file launch.json nằm trong folder .vscode và việc chúng ta cần làm là viết các cấu hình custom chúng ta muốn vào đấy. Và các cấu hình custom này được gọi là launch configuration.
- Khi bạn cài Dart và Flutter extension vào VSCode, nó sẽ đi kèm với 1 trình khởi chạy mặc định. Đó là lý do vì sao bạn vẫn có thể chạy ứng dụng mà không có file launch.json.
- Tóm lại, launch configuration không phải là tính năng của Dart hay Flutter, nó là một cấu hình để mở rộng khả năng của VS Code. Nếu các bạn sử dụng Android Studio để build code flutter thì có lẽ bài viết này không dành cho bạn rồi. Ahihi!
Đầu tiên, mình sẽ hướng dẫn cách tạo file launch.json:
-
Bạn vào tab
Run and Debugvà click vào create a launch.json file.
-
Sau khi click thì bạn sẽ thấy 1 file như thế này
-
File có nội dung ban đầu với cấu trúc json như sau:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "demo_flavor",
"request": "launch",
"type": "dart"
},
{
"name": "demo_flavor (profile mode)",
"request": "launch",
"type": "dart",
"flutterMode": "profile"
},
{
"name": "demo_flavor (release mode)",
"request": "launch",
"type": "dart",
"flutterMode": "release"
}
]
}Trong object configurations chính là các launch configuration mà các bạn có thể custom. Để mình giải thích về một số thuộc tính của launch configuration nhé!
-
name: (bắt buộc có) tên của launch configuration sẽ xuất hiện trong menu xổ xuống của tab Run và Debug.
Là cái menu này nè!
-
request: (bắt buộc có) có 2 loại là launch và attach, để phân biệt giữa chúng thì các bạn đọc thêm tại đây.
-
type: (bắt buộc có) loại debbuger sử dụng
-
args: các tham số được truyền vào
-
program: file để khởi chạy khi launch debugger
Còn rất nhiều tham số mà bạn có thể tham khảo tại Launch.json attributes nhưng cơ bản với dart thì chỉ cần chừng đó là đủ rồi.
Bạn không cần phải quá lo lắng về việc hiểu sâu về các thuộc tính này vì khi các bạn tạo ra file launch.json thì VSCode đã chọn sẵn các thuộc tính phù hợp nhất với mình rồi!
Dịch nghĩa tiêu đề ra là Tuỳ chỉnh trình khởi chạy và gỡ rối với các môi trường của Flutter. Nghe khá khoai nên mình xin phép giữ tiếng Anh cho tiêu đề.
Về Flutter Flavors, các bạn có thể tham khảo lại bài viết trước của mình tại link này
Mình sẽ define 3 launch configuration tương ứng với 3 flavor là dev, staging và product.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
// 1
"name": "dev",
// 2
"request": "launch",
// 3
"type": "dart",
// 4
"args": ["--flavor", "dev"]
},
{
"name": "staging",
"request": "launch",
"type": "dart",
"args": ["--flavor", "staging"]
},
{
"name": "product",
"request": "launch",
"type": "dart",
"args": ["--flavor", "product"]
}
]
}Giải thích một chút:
-
1: Mình chọn cách đặt tên theo tên flavor cho dễ phân biệt
-
2 và 3: request và type sẽ được giữ nguyên theo đề xuất của VS Code
-
4: Chúng ta sử dụng tham số là
--flavorvới value là các flavor tương ứng mà mình đã config ở bài trước. Các bạn có thắc mắc vì sao tham số là--flavorkhông? Ở đây chúng ta sẽ pass những argument vào câu lệnhflutter run. Như hướng dẫn ở phần thực thi, câu lệnh chúng ta sẽ thực hiện khi run app Flutter với flavor làflutter run --flavor {tên flavor tương ứng}.
Tới bước này, bạn đã hoàn thành mong muốn là build được các flavor bằng nút build của IDE mà không cần chạy lệnh rồi đó!
Thử chọn từng launch configuration trên Run Menu và bấm nút thôi!
Kết quả: Bạn có thể thấy 3 cái app với 3 tên khác nhau tương ứng với các flavor do mình đã tạo ở bước trước đó!
| iOS | Android |
|---|---|
 |  |
Qua 2 bài viết của mình, bạn đã biết cách
-
Cấu hình các flavor cho Flutter.
-
Sử dụng launch configuration để custom run và debug theo ý muốn của mình.
Có lẽ bạn sẽ cảm thấy còn thiếu thiếu gì đó về flavor. Chúng ta đã có những app name khác nhau, có những application id (android) hay bundle identifier (iOS) khác nhau và tương ứng với từng flavor nhưng còn những đặc trưng nhất của chúng là api url, key service thì sao? Phải làm như thế nào để định nghĩa mỗi api url riêng cho từng flavor? Vậy thì bạn cần phải xem tiếp bài viết sau của mình ở đây. Hoặc bạn cũng có thể xem thêm cách mình ứng dụng launch configuration ở bài này.
Cảm ơn các bạn đã theo dõi và hẹn gặp lại!