Để có thể tạo cho mình một app IOS trên Mac OS bằng Flutter, dĩ nhiên chúng ta cần cài đặt Flutter.
Flutter có cung cấp trang hướng dẫn cài đặt rất chi tiết tại đây: https://docs.flutter.dev/get-started/install
Tuy nhiên trong quá trình cài đặt, tôi vẫn vướng phải một số vấn đề. Vì thế, tôi viết bài này để chia sẻ về vấn đề tôi gặp phải và cách tôi đã giải quyết chúng.
Ok, let’s go!
Đầu tiên, trong phần cài đặt, tôi chọn hệ điều hành Mac OS, sau đó chọn loại ứng dụng phát triển. Ví dụ chọn IOS.
Ở đây, tôi sẽ liệt kê lại những ứng dụng mà chúng ta cần cài trên máy tính:
Phần 1: Các công cụ phát triển:
+ Xcode 15: để debug và compile code Swift hoặc ObjectiveC.
+ CocoaPods: để compile các plugin kích hoạt trong ứng dụng gốc của bạn.
+ Git: để quản lý source code. Sẽ tự động cài đặt nếu cài Xcode. Có thể kiểm tra đã cài git chưa bằng lệnh git version trong Terminal.
Có thể dùng Homebrew để cài CocoaPods hay Git. (Link cài Homebrew nếu chưa cài đặt: https://brew.sh/)
1. Nhấn Ctrl + dấu cách, tìm mở Terminal
2. Copy câu lệnh cài Homebrew từ trang web, Paste vào Terminal và nhấn Enter để chạy.
3. Để kiểm tra đã sử dụng được Homebrew chưa, gõ và chạy lệnh: brew help
Nếu báo lỗi “command not found: brew”, vậy có nghĩa là bạn chưa thêm biến môi trường PATH.
Để thêm biến môi trường PATH, có thể dùng 1 trong 2 cách sau:
Cách 1:
Chạy 2 lệnh sau trong Terminal:
echo ‘eval $(/opt/homebrew/bin/brew shellenv)’ >> /Users/$USER/.zprofile
eval $(/opt/homebrew/bin/brew shellenv)
Cách 2:
– Mở thư mục HOME, nhấn Ctrl + Shift + . để hiển thị các file bị ẩn.
– Tìm file .zshrc. Nếu chưa có file, hãy gõ touch .zshrc trong terminal, file sẽ được tạo.
– Mở file .zshrc, thêm dòng sau: export PATH=”$PATH:/opt/homebrew/bin”
Sau khi thêm dòng lệnh trên, lưu và đóng file .zshrc.
– Để load lại file và reset biến, gõ và chạy lệnh sau trong Terminal: source .zshrc
– Sau đó chạy lại lệnh: brew help
Để dùng Homebrew cài đặt phần mềm, gõ : brew install [Tên phần mềm]
Ví dụ: brew install git
Phần 2: Các trình soạn thảo hoặc môi trường tích hợp phát triển
+ Visual Studio Code 1.75 trở lên với plugin Flutter
+ Android Studio 2022.3 trở lên
+ Intellij IDEA 2022.3 trở lên
Ok, giờ tới phần quan trọng nè!
Cài đặt Flutter SDK
Sau khi cài đặt Flutter SDK theo trang hướng dẫn, nếu bạn chạy lệnh flutter doctor mà thấy báo lỗi như này: “command not found: flutter“
Đó, chính nó! Thấy quen không :)? Vì chúng ta vừa gặp mà. Rồi, giờ việc cần làm cũng là thêm đường dẫn cho cái biến PATH.
Mở file .zshrc, thêm dòng sau: export PATH=”$PATH:[Đường dẫn đến thư mục Flutter của bạn]/bin”
Ví dụ: export PATH=”$PATH:Users/1minute4change/development/flutter/bin”
Bạn ở thể lấy thông tin đường dẫn bằng các truy cập vào thư mục flutter của bạn, vào thư mục bin, nhấn chuột phải để lấy thông tin thư mục, sau đó Copy thông tin đường dẫn.
Sau đó chạy lệnh source .zshrc để biến được thiết lập.
Nếu bước này báo lỗi không tìm thấy đường dẫn, vậy thì có thể do bước trước đó bạn đã thêm đường dẫn nào đó bị sai vào file. Mặc dù khi mở file không nhìn thấy, nhưng nó vẫn tồn tại.
Tôi từng chạy một câu lệnh export PATH bằng Terminal với đường dẫn không tồn tại, và do đó khi chạy lệnh source .zshrc, tôi đã bị báo lỗi. Vì file .zshrc của tôi chỉ có 2 dòng lệnh, nên tôi đã xoá nó đi và tạo lại, và sau đó nó đã chạy trơn tru.
Sau khi cài đặt xong theo hướng dẫn, chạy lại lệnh flutter doctor trong Terminal để kiểm tra.
Khi đã cài đặt xong, chúng ta có thể làm theo hướng dẫn của Flutter và chạy thử ứng dụng Test drive .
Flutter có cung cấp chức năng “Hot reload”, giúp bạn tải lại code vừa sửa ngay lập tức mà không cần chạy lại ứng dụng.
Tuy nhiên, khi tôi thử tính năng này trên VS Code, tôi đã gặp lỗi “Fail to Hot Reload: Please ensure that the SDK and/or project is installed in a location that has read/write permissions”.
Tôi không cài đặt Flutter trong thư mục không có quyền đọc/ghi. Tôi cũng đã bật Auto Save của VS Code, đã vào phần Setting, gõ Hot reload và chọn “all” các mục Dart: Flutter Hot Reload On Save, Dart: Hot Reload On Save, nhưng vẫn không thể dùng Hot reload.
Sau đó tôi tắt máy đi bật lại, và bất ngờ chưa, Hot reload đã có thể sử dụng :)).
Ok, vậy là xong! Hy vọng phần chia sẻ này có thể giúp bạn cài đặt Flutter thành công!
Chúc may mắn!