CÔNG NGHỆ THÔNG TIN >> BÀI VIẾT CHỌN LỌC

Hướng dẫn cài đặt môi trường lập trình Dart và Flutter trên Windows 10 từ A-Z

Đăng lúc: 03:47 PM - 15/05/2024 bởi Charles Chung - 1146

Flutter là một lựa chọn tốt để phát triển các ứng dụng đa nền tảng. Trong bài viết này tôi sẽ hướng dẫn các bạn cách cài đặt môi trường để lập trình Mobile đa nền tảng với Dart và Flutter trên Windows 10.

Để phát triển ứng dụng Flutter trên nền tảng Windows chúng ta cần phải tuân theo yêu cầu phần cứng và phần mềm như sau:

Yêu cầu phần cứng

Requirement Minimum Recommended
x86_64 CPU Cores 4 8
Memory in GB 8 16
Display resolution in pixels WXGA (1366 x 768) FHD (1920 x 1080)
Free disk space in GB 11.0 60.0

Yêu cầu phần mềm

1. Cài đặt Flutter

- Tải bản Flutter stable tại đây

- Giải nén ra ổ C như cấu trúc sau

- Mở cửa sổ Environment Variables của Windows lên và bổ sung thêm đường dẫn c:\flutter\bin vào biến path và nhấn OK để xác nhận

- Mở windows Powershell và gõ lệnh flutter doctor để kiểm tra các thông số

- Lưu ý Dart SDK đã được tích hợp cùng flutter tại đường dẫn C:\flutter\bin\cache\dart-sdk, do đó bạn không cần phải cài ngôn ngữ Dart nhé.

2. Cài đặt Visual Studio Code + Extension Dart Code (cái này để sau này học ngôn ngữ Dart cho nhẹ)

- Tải Visual Studio Code bản mới nhất tại đây

- Kích double chuột vào tệp VSCodeUserSetup-x64-1.89.1.exe vừa tải về để cài đặt -> I Accept...-> next- next->Finish.

- Mở Visual Code và cài Extension Dart

- Tạo một tệp tin demo.dart để test ( lưu ý máy sẽ hỏi bạn vị trí của dart sdk -> chọn Local SDK và trỏ tới đường dẫn C:\flutter\bin\cache\dart-sdk để chúng ta có thể chạy file .dart trong visual code)

3. Cài đặt Java JDK 17 và cấu hình JAVA_HOME

- Tải Java JDK 17 tại đây

- Một số tính năng (tìm hiểu chi tiết tại đây https://javatechonline.com/java-17-features/

  1. Hạn chế triển khai với các Sealed classes và Giao diện
  2. Sử dụng Null trong Switch Case hiện đã hợp lệ
  3. Chấm dứt việc đoán nguyên nhân của NullPointerException(NPE)
  4. Định nghĩa lại các biểu thức câu lệnh Switch (switch statement)
  5. Giảm dòng có với Lớp bản ghi (Record classes)

- Sau khi tải về các bạn kích double chuột vào tệp jdk-17.0.8_windows-x64_bin.msi để cài -> Xuất hiện thông báo thì chon yes -> màn hình tiếp theo

Chọn next

Chọn next (nếu xuất hiện thông báo thì chọn Yes)

Màn hình cài đặt

Chọn close để kết thúc

- Mở cửa sổ Environment Variables của Windows lên và bổ sung thêm biến JAVA_HOME chứa đường dẫn thư mục JDK17 rồi nhấn OK để xác nhận.

4. Cài đặt Android Studio 2023 + Cấu hình Android SDK + Cài các thành phần Android Studio + Cài plugin Dart, Flutter

- Tải Android Studio 2023 tại đây

- Kích đúp vào tệp android-studio-2023.3.1.18-windows.exe để cài đặt

- Kích next để tiếp tục

- Kích next để tiếp tục

- Chờ cài xong rồi nhất Finish (khởi động luôn android Studio lên nhé)

- Chọn từng mục để Accept license rồi chọn Finish

- Chờ máy cài Android SDK

- Màn hình cài kết thúc thì nhấn Finish

- Màn hình Welcome xuất hiện -> kích vào mục Plugins để cài Dart Plugin

- Tiếp tục cài Flutter plugin


- Xong máy sẽ yêu cầu Restart IDE -> kích vào Restart IDE

- Sau khi khởi động lại tại màn hình Welcome, kích vào More Action và chọn SDK Manager

- Kích sang tab SDK Tool và chọn Android SDK Command-line Tools (lastest) -> OK

- Tắt Android Studio đi.

- Cấu hình đường dẫn biến môi trường ANDROID_HOME trong Windows

- Mở cửa sổ Windows PowerShell gõ lệnh flutter doctor để kiểm tra

- Tiếp theo gõ lệnh flutter doctor --android-licenses để chấp nhận các licenses

alt text

- Lưu ý máy sẽ hỏi từng license -> gõ phím y và Enter

- Cuối cùng gõ lệnh flutter doctor để kiểm tra (như hình dưới là ok)

5. Cài Visual Studio 2023 (nếu bạn muốn sử dụng Flutter code ứng dụng Desktop trên windows còn không thì bỏ qua)

6. Tạo ứng dụng Flutter và Run

- Khởi động Android Studio 2023

- Tại màn hình Welcome chọn New Project -> chọn Flutter -> chỉ ra đường dẫn thư mục Flutter trên ổ C.

- Kích Next và nhập tên dự án và các thông số như hình dưới và nhấn Create để tạo

- Mở tab Device Manager ra và khởi động máy ảo Android, nếu chưa cài thì kích vào dấu + để cài, ở đây sau khi cài android studio 2023 xong có sẵn.

- Màn hình khởi động thành công

- Nhấn nút Run để chạy tệp main.dart -> kết quả ứng dụng chạy lên như hình dưới.

Video hướng dẫn cài đặt trên Windows 11

thay lời cảm ơn!

QUẢNG CÁO - TIẾP THỊ