Chuẩn bị môi trường học tập Dart từ Flutter

Giới thiệu

Khi bắt đầu học Dart, sinh viên có thể gặp rất nhiều hướng dẫn cài đặt khác nhau trên Internet, từ các khóa học, video, bài viết hoặc những hướng dẫn khác nhau trên lớp. Điều này dễ dẫn đến một câu hỏi:“Tôi nên cài theo hướng nào để vừa học được Dart, vừa sẵn sàng cho Flutter sau này?”

Hướng dẫn này được xây dựng để giải quyết sự phân tán đó. Thay vì yêu cầu sinh viên tự chọn giữa nhiều cách cấu hình, chúng ta sẽ thống nhất một môi trường học tập dùng xuyên suốt từ IDP (Introduction to Dart Programmin) cho đến ADFD (Application Development using Flutter & Dart).

IDP tập trung vào nền tảng lập trình và Core Dart trên môi trường dòng lệnn (Console). ADFD mở rộng Dart vào Flutter để xây dựng giao diện và ứng dụng di động. Vì vậy, chuẩn bị môi trường theo hướng “DART from FLUTTER” sẽ được chọn trong tài liệu.

Hình bên dưới cho chúng ta bức tranh toàn cảnh của tài liệu, giới thiệu để sinh viên hiểu sự khác nhau của cả hai cách tiếp cận. Tuy nhiên, chúng ta thống nhất thiết đặt môi ttường theo hướng cài đặt DART từ FLUTTER.

Thông điệp chính: Cài một lần, sử dụng xuyên suốt tới đồ án tốt nghiệp.

Cài đặt

Quá trình cài đặt sẽ theo tiến trình như hình H.02.

Android Studio

Android Studio được sử dụng để chuẩn bị Android SDK và Android Emulator. Trong hướng dẫn này chỉ cấu hình những thành phần cần thiết cho Flutter trên Android.

Download

• • Truy cập: https://developer.android.com/studio
  • Chọn “Download Android Studio Quail 3”. (Hình 03)

• Trong popup, chọn “I have read and agree with the above terms and conditions ”.
• Nhấp chọn “Download Android Studio Quail 3 | xxxx.x.x for Windows”. (Hình 04)

Cài đặt

• • Nhấp đôi lên file “android-studio-quail3-windows.exe” vừa download về.
  • Quá trình cài đặt bắt đầu như hình 05.
  • Nhấn nút Finish khi quá trình cài đặt kết thúc để hoàn tất

Thiết đặt

• • Sau khi cài đặt, mở Android Studio.
  • Ở lần chạy đầu tiên, nhấp chọn chấp nhận các điều khoản như hình 06.

• Nhấn nút Next theo wizard để hoàn tất.
• Android SDK về cơ bản đã được cài đặt tự động.
• Quay về màn hình Welcome chọn SDK Manager như hình 07.

• Trong tab SDK Tools, chọn 4 mục:
  • Android SDK Build-Tools
  • Android SDK Command-line Tools (latest)
  • Android Emulator
  • Android SDK Platform-Tools

• Quay về màn hình Welcome, chọn Virtual Device Manager.
  • Tiếp tục chọn Create Virtual Device | chọn nhóm Phone
  • Trong danh sách thiết bị, chọn phone cụ thể, ví dụ Pixel 7
  • Kết quả như hình

• Khởi động Pixel 7 Emulator
• Hãy chờ cho đến khi emulator khởi động hoàn toàn

Lưu ý:

• Sau mục Flutter SDK, chạy “flutter devices”

để kiểm tra các thiết bị Flutter có thể sử dụng.

• Nội dung này áp dụng khi làm việc với dự án Flutter.

Visual Studio Code

VS Code được sử dụng làm editor chính trong hướng dẫn.

• Download
  • Truy cập: https://code.visualstudio.com
  • Chọn phiên bản phụ hợp nền tảng
  • Cài đặt.

• Cài đặ extension
  • Mở Visual Studio Code, chọn extension.
  • Chọn Flutter Extension như hình 09.

Flutter SDK

Là thành phần trung tâm của phương án DART from FLUTTER.

• Download
  • Truy cập: https://docs.flutter.dev/install/archive
  • Chọn trong danh mục “Stable channel”. (Hình 10)

• Giải nén Flutter SDK vừa download về
• Chép vào một thư mục trong máy, ví dụ C:\Flutter.

• Cấu hình System PATH
  • Mở Enviroment System
  • Thêm thư mục bin của Flutter vào biến môi trường Path
• Kiểm tra Flutter
  • Mở PowerShell hoặc Command Prompt
  • Nhập lệnh rồi nhấn enter

• Khi được hỏi “Accept?”, nhập y và nhấn enter đồng ý.
• Kiểm tra toàn bộ môi trường Flutter

Project đầu tiên — Hello Dart

• • Mở Visual Studio Code.
  • Bấm tổ hợp phím Ctrl+Shift+P
  • Nhập “dart” rồi chọn Dart: Create New Project như hình 11.

• Chọn “Console Application console” như hình 12.

• Chọn nơi lưu dự án như hình 13.

• Nhập tên dự án hợp lệ (chữ thường, dùng underscore) như hình 14

• Trong thư mục “bin” của dự án, tạo file dart
• Thay nội dung như hình 15
• Nhấp chọn Run trong giao diện

Lưu ý:

• Không nhập data từ bàn phím, dùng Run code trong giao diện.
• Ngược lại dùng lệnh dart run.

Ví dụ:

Lê Thanh Nhân – Giảng viên FPT Aptech