Bài 2.2: Hướng dẫn cài đặt Flutter trên macOS

Bài viết này mình sẽ hướng dẫn các bạn cách cài đặt Flutter trên macOS để có thể học lập trình Flutter cơ bản một cách đơn giản nhất.

Cài đặt Flutter trên macOS

Yêu cầu hệ thống

Để cài đặt và chạy được Flutter trên macOS bạn cần đáp ứng đủ yêu cầu hệ thống tối thiểu như sau:

• Hệ điều hành: macOS
• Disk Space: 2.8 GB (không bao gồm dung lượng dành cho IDE/tools).
• Tools: Flutter dùng Git để cài đặt và update. Mình khuyên bạn nên cài đặt XCode để bao gồm cả Git cũng như sử dụng để build app iOS luôn. Nếu không bạn có thể cài đặt riêng install git separately.

sudo softwareupdate --install-rosetta --agree-to-license

Download Flutter SDK

1. Download phiên bản Flutter SDK mới nhất về máy.

Hoặc bạn có thể tìm những phiên bản SDK khác SDK Release

Để kiểm tra xem máy mac của bạn đang chạy dòng chip nào có thể dùng trang Mac Computer trên Apple.com

2. Giải nén file SDK tải về vào thư mục Develop

cd ~/development
unzip ~/Downloads/flutter_macos_3.0.3-stable.zip

3. Thêm Flutter SDK vào path

export PATH="$PATH:`pwd`/flutter/bin"

Dòng lệnh trên chỉ thêm path SDK vào màn hình terminal hiện tại. Nếu muốn sử dụng ở màn hình terminal khác thì bạn có thể đọc thêm phần Update Path

Run flutter doctor

Để kiểm tra xem đã cài đặt đủ các phần khác của Flutter chưa bạn có thể nhập lệnh vào màn hình terminal

flutter doctor

Lệnh này sẽ kiểm tra môi trường và các thành phần phụ thuộc

Ví dụ:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.

Tùy vào kết quả trả về bạn cần làm theo và kiểm tra lại.

Cài đặt Flutter trên macOS bằng Github

Nếu bạn đã có kinh nghiệm sử dụng Git thì có thể dùng cách này để quản lý SDK

Bạn có thể clone bản SDK mới nhất bằng câu lệnh

git clone https://github.com/flutter/flutter.git -b stable

Bạn cần cập nhật lại Path và chạy lệnh flutter doctor để kiểm tra các thành phần còn thiếu.

Update Path

Nếu như chỉ dừng lại ở bước trên thì bạn chỉ mới có thể sử dụng được Flutter command bằng cách trỏ đường dẫn tới thư mục bin hoặc mở cửa sổ.

Gõ nếu bạn dùng Terminal

echo $SHELL 

Nếu dùng Bash

$HOME/.bash_profile or $HOME/.bashrc

nếu dùng Z shell

 $HOME/.zshrc.

Nếu bạn dùng terminal khác thì có thể tìm hiểu cách thêm PATH vào cấu hình của loại terminal đó

Thay đổi [PATH_OF_FLUTTER_GIT_DIRECTORY] tùy vào đường dẫn mà bạn đã tải SDK hoặc clone về

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

Chạy lệnh source $HOME/.<rc file> để refresh lại cửa sổ hiện tại hoặc mở lại cửa số khác để tự động nhận diện PATH của flutter

Chạy lệnh echo $PATH để kiểm tra xem đã có flutter/bin trong PATH của bạn chưa

Chạy lệnh

which flutter

để kiểm tra flutter đã hoạt động trên máy macOS của bạn chưa.

Platform setup

Flutter hỗ trợ bạn có thể lập trình ứng dụng cho Android, iOS, web và ứng dụng cho mac. Tùy vào platform mà bạn muốn thì cần cài đặt thêm các thành phần phù hợp.

iOS Setup

Cài đặt XCode

Để develop ứng dụng iOS bạn cần một máy macOS và cài đặt XCode

1. Cài đặt phiên bản Xcode mới nhất (sử dụng web download hoặc tải trên Mac App Store).

2. Cấu hình Xcode command-line tools khi chạy lần đầu tiên bằng command

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Câu lệnh trên chỉ đúng khi bạn sử dụng XCode bản mới nhất. Nếu bạn sử dụng phiên bản khác của Xcode thì cần thay đổi lại đường dẫn

3. Bạn cần đồng ý các điều khoản của Xcode bằng cách mới Xcode lần đầu hoặc dùng câu lệnh sudo xcodebuild -license

Những bản Xcode cũ hơn vẫn có thể chạy được Flutter nhưng mình khuyên bạn nên sử dụng bản mới nhất vì có thể các bitcode sẽ không hoạt động trên Xcode cũ.

Với Xcode bạn có thể chạy Flutter app trên iPhone, iPad hoặc iOS simulator

Cài đặt iOS Simulator

Để chạy được Flutter app trên macOS bạn có thể sử dụng iOS Simulator.

1. Trên máy mac bạn vào Spotlight và tìm Simulator hoặc dùng lệnh

open -a Simulator

2. Để kiểm tra xem bạn đã dùng 64 bit (từ iPhone 5s trở lên). Bạn có thể check bằng cách vào Hardware > Device hoặc File > Open Simulator.

3. Tùy vào thiết bị mà bạn chọn để chạy test thì iOS Simulator sẽ mô phỏng độ phân giải, mật độ điểm ảnh của thiết bị thật nên có thể máy ảo sẽ tràn khỏi màn hình của mình. Bạn có thể vào Window > Physical Size hoặc Window > Pixel Accurate

Tạo ứng dụng Flutter trên macOS

Để tạo ứng dụng Flutter trên macOS, bạn có thể chạy câu lệnh dưới đây

flutter create my_app

Thư mục my_app được tạo với các thành phần để chạy Flutter. Vào thư mục my_app

cd my_app

Để chạy ứng dụng trên simulator cần mở Simulator trước và chạy lệnh

flutter run

Chạy Flutter trên thiết bị iOS

Để chạy Flutter trên thiết bị iOS bạn cần cài đặt XCode và tài khoản Apple Developer và cài đặt CocoaPods 

1. Tải và cài đặt CocoaPods bằng câu lệnh

sudo gem install cocoapods

  $ sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc

2. Làm theo hướng dẫn để chạy được flutter trên máy thật

• Mở Xcode workspace của Flutter theo đường dẫn ios/Runner.xcworkspace 
• Chọn thiết bị mà bạn muốn cài đặt ứng dụng
• Chọn project Runner bên cửa sổ bên trái
• Trong phần cài đặt của Runner bạn cần chú ý tới phần Development Team và mục Signing & Capabilities > Team.
  • Khi bạn chọn Team thì Xcode sẽ tạo và download Development Certificate, đăng ký thiết bị của bạn với tài khoản, tạo và download provisioning profile.
  • Để bắt đầu develop ứng dụng iOS bạn cần đăng nhập Apple ID vào Xcode. Development và testing hỗ trợ bất cứ tài khoản Apple ID. Nếu muốn đưa app của bạn lên AppStore thì cần nâng cấp tài khoản theo Choosing a Membership.
    
  • Lần đầu tiên chạy ứng dụng lên thiết bị thật sẽ có dialog Trust Device xuất hiện và bạn cần chọn Trust để chạy được ứng dụng
  • Nếu quá trình verify thất bại thì bạn cần kiểm tra General > Identity > Bundle Identifier có trùng không
• Để chạy ứng dụng bạn chạy lệnh flutter run hoặc nút Run tại Xcode

Cài đặt Android Studio

Cài đặt Android Studio trên macOS cũng tương tự như bên Windows nên bạn có thể xem lại bài viết Cài đặt Flutter trên Windows

Nếu bạn muốn học Lập trình Flutter cơ bản có thể xem qua Lập trình Flutter cơ bản trên 1kho.info. Và theo dõi Fanpage 1Kho.info để theo dõi những bài mới nhất https://www.facebook.com/1kho.info