Flutter: Test drive

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Bài viết này mô tả cách tạo một ứng dụng Flutter mới từ các mẫu, chạy nó và trải nghiệm “hot reload” sau khi bạn thực hiện các thay đổi đối với ứng dụng.

Chọn công cụ phát triển của bạn để viết, xây dựng và chạy các ứng dụng Flutter:

  1. Android Studio và IntelliJ
  2. Visual Studio Code
  3. Terminal & editor

1. Android Studio và IntelliJ

Tạo ứng dụng

Bạn có muốn chạy ứng dụng Flutter của mình trên web không? Phiên bản web của Flutter hiện có trên kênh beta. Để dùng thử, hãy xem phần Viết ứng dụng Flutter đầu tiên của bạn cho web codelab.

  1. Mở IDE và chọn Start a new Flutter project.
  2. Chọn Flutter Application làm loại dự án, sau đó nhấp vào Next.
  3. Xác minh đường dẫn Flutter SDK chỉ định vị trí của SDK (chọn Install SDK… nếu trường văn bản trống).
  4. Nhập tên dự án (ví dụ myapp), sau đó nhấp vào Next.
  5. Nhấp vào Finish.
  6. Chờ Android Studio cài đặt SDK và tạo dự án.

Lưu ý: Khi tạo một ứng dụng Flutter mới, một số plugin Flutter IDE yêu cầu tên miền công ty theo thứ tự ngược lại, giống như com.example. Tên miền công ty và tên dự án được sử dụng cùng nhau làm tên gói cho Android (ID gói dành cho iOS) khi ứng dụng được phát hành. Nếu bạn nghĩ rằng ứng dụng có thể được phát hành, tốt hơn là chỉ định tên gói ngay bây giờ. Bạn không thể thay đổi tên gói sau khi ứng dụng được phát hành, vì vậy hãy đặt tên này là duy nhất.

Các lệnh trên tạo một thư mục dự án Flutter có tên myapp chứa một ứng dụng demo đơn giản sử dụng Material Components.

Mẹo: Mã cho ứng dụng của bạn nằm trong lib/main.dart. Để có mô tả cấp cao về chức năng của mỗi khối mã, hãy xem các nhận xét ở đầu tệp đó.

Chạy ứng dụng

  1. Tìm thanh công cụ Android Studio chính:
    Thanh công cụ IntelliJ chính
  2. Trong target selecter, hãy chọn thiết bị Android để chạy ứng dụng. Nếu không có cái nào được liệt kê là khả dụng, hãy chọn Tools> Android> AVD Manager và tạo một cái ở đó.
  3. Nhấp vào biểu tượng chạy trên thanh công cụ hoặc gọi mục menu Run> Run.

Sau khi xây dựng ứng dụng hoàn tất, bạn sẽ thấy ứng dụng dành cho người mới bắt đầu trên thiết bị của mình.

Ứng dụng Starter trên iOS
Ứng dụng dành cho người mới bắt đầu

Thử hot reload

Flutter cung cấp một chu kỳ phát triển nhanh chóng với tính năng Stateful Hot Reload, có khả năng tải lại mã của một ứng dụng đang chạy trực tiếp mà không cần khởi động lại hoặc mất trạng thái ứng dụng. Thực hiện thay đổi đối với nguồn ứng dụng, hãy cho IDE hoặc công cụ dòng lệnh biết rằng bạn muốn hot reload (tải lại nóng) và xem sự thay đổi trong trình mô phỏng, trình giả lập hoặc thiết bị của bạn.

  1. Mở lib/main.dart.
  2. Thay đổi chuỗi

    'Bạn đã đẩy nút này nhiều lần'

    thành

    'Bạn đã nhấp vào nút này nhiều lần'

    Chú ý: Đừng dừng ứng dụng của bạn, hãy để ứng dụng của bạn chạy.
  3. Lưu các thay đổi của bạn: gọi Save All hoặc nhấp vào Hot Reload.

Bạn sẽ thấy chuỗi được cập nhật trong ứng dụng đang chạy gần như ngay lập tức.

Profile hoặc release

Quan trọng: Đỗ không kiểm tra việc thực hiện các ứng dụng của bạn với gỡ lỗi và tải lại nóng kích hoạt.

Hiện tại bạn vẫn đang chạy ứng dụng của mình ở chế độ debug. Chế độ gỡ lỗi giao dịch hiệu suất cho các tính năng hữu ích của nhà phát triển như tải lại nóng và gỡ lỗi bước. Không có gì bất ngờ khi thấy hiệu suất chậm và hoạt ảnh lộn xộn trong chế độ gỡ lỗi. Khi bạn đã sẵn sàng phân tích hiệu suất hoặc phát hành ứng dụng của mình, bạn sẽ muốn sử dụng các chế độ xây dựng "profile" hoặc "release" của Flutter. Để biết thêm chi tiết, hãy xem các chế độ xây dựng của Flutter.

Quan trọng: Nếu bạn lo lắng về kích thước gói ứng dụng của mình, hãy xem Đo kích thước ứng dụng của bạn . 

2. Visual Studio Code

Tạo ứng dụng

Bạn có muốn chạy ứng dụng Flutter của mình trên web không? Phiên bản web của Flutter hiện có trên kênh beta. Để dùng thử, hãy xem phần Viết ứng dụng Flutter đầu tiên của bạn cho web codelab.

  1. Gọi View> Command Palette.
  2. Gõ "Flutter" và chọn Flutter: New Application Project.
  3. Nhập tên dự án, chẳng hạn như myapp, và nhấn Enter.
  4. Tạo hoặc chọn thư mục mẹ cho thư mục dự án mới.
  5. Chờ cho quá trình tạo dự án hoàn tất và file main.dart xuất hiện.

Lưu ý: Khi tạo một ứng dụng Flutter mới, một số plugin Flutter IDE yêu cầu tên miền công ty theo thứ tự ngược lại, giống như com.example. Tên miền công ty và tên dự án được sử dụng cùng nhau làm tên gói cho Android (ID gói dành cho iOS) khi ứng dụng được phát hành. Nếu bạn nghĩ rằng ứng dụng có thể được phát hành, tốt hơn là chỉ định tên gói ngay bây giờ. Bạn không thể thay đổi tên gói sau khi ứng dụng được phát hành, vì vậy hãy đặt tên này là duy nhất.

Các lệnh trên tạo một thư mục dự án Flutter có tên myapp chứa một ứng dụng demo đơn giản sử dụng Material Components.

Cảnh báo: Nếu VS Code đang chạy trong quá trình thiết lập Flutter ban đầu, bạn có thể cần khởi động lại nó để plugin Flutter của VS Code phát hiện SDK Flutter.

Mẹo: Mã cho ứng dụng của bạn nằm trong lib/main.dart. Để có mô tả cấp cao về chức năng của mỗi khối mã, hãy xem các nhận xét ở đầu tệp đó.

Chạy ứng dụng

  1. Định vị thanh trạng thái Mã VS (thanh màu xanh lam ở cuối cửa sổ):
    VS Code
  2. Chọn một thiết bị từ khu vực Bộ chọn thiết bị . Để biết chi tiết, hãy xem Chuyển đổi nhanh giữa các thiết bị Flutter.
    • ​Nếu không có thiết bị nào khả dụng và bạn muốn sử dụng trình mô phỏng thiết bị, hãy nhấp vào Không có thiết bị và khởi chạy trình mô phỏng.

      Cảnh báo: Bạn có thể không thấy tùy chọn Bắt đầu trình mô phỏng iOS khi bạn nhấp vào Không có thiết bị trong VS Code. Nếu bạn đang sử dụng Mac thì bạn có thể phải chạy lệnh sau trong thiết bị đầu cuối để khởi chạy trình mô phỏng.

      open -a simulator

      Trong Android, không thể khởi chạy trình mô phỏng iOS.

    • Để thiết lập một thiết bị thực, hãy làm theo hướng dẫn dành riêng cho thiết bị trên trang Cài đặt cho hệ điều hành của bạn.

  3. Gọi Run> Start Debugging hoặc nhấn F5.
  4. Chờ ứng dụng khởi chạy - tiến trình được in trong dạng xem Debug Console.

Cảnh báo: Khi khởi chạy ứng dụng của bạn từ máy Mac, nếu bạn thấy ERROR: Could not connect to lockdownd, error code -17, hãy đảm bảo rằng bạn đã tin cậy máy tính của mình.

Sau khi xây dựng ứng dụng hoàn tất, bạn sẽ thấy ứng dụng dành cho người mới bắt đầu trên thiết bị của mình.

Ứng dụng Starter trên iOS
Ứng dụng dành cho người mới bắt đầu

Thử hot reload

Flutter cung cấp một chu kỳ phát triển nhanh chóng với tính năng Stateful Hot Reload, có khả năng tải lại mã của một ứng dụng đang chạy trực tiếp mà không cần khởi động lại hoặc mất trạng thái ứng dụng. Thực hiện thay đổi đối với nguồn ứng dụng, hãy cho IDE hoặc công cụ dòng lệnh biết rằng bạn muốn hot reload (tải lại nóng) và xem sự thay đổi trong trình mô phỏng, trình giả lập hoặc thiết bị của bạn.

  1. Mở lib/main.dart.
  2. Thay đổi chuỗi
    'Bạn đã đẩy nút này nhiều lần'

    thành

    'Bạn đã nhấp vào nút này nhiều lần'

    Chú ý: Đừng dừng ứng dụng của bạn, hãy để ứng dụng của bạn chạy.
  3. Lưu các thay đổi của bạn: gọi Save All hoặc nhấp vào Hot Reload.

Bạn sẽ thấy chuỗi được cập nhật trong ứng dụng đang chạy gần như ngay lập tức.

Profile hoặc release

Quan trọng: Đỗ không kiểm tra việc thực hiện các ứng dụng của bạn với gỡ lỗi và tải lại nóng kích hoạt.

Hiện tại bạn vẫn đang chạy ứng dụng của mình ở chế độ debug. Chế độ gỡ lỗi giao dịch hiệu suất cho các tính năng hữu ích của nhà phát triển như tải lại nóng và gỡ lỗi bước. Không có gì bất ngờ khi thấy hiệu suất chậm và hoạt ảnh lộn xộn trong chế độ gỡ lỗi. Khi bạn đã sẵn sàng phân tích hiệu suất hoặc phát hành ứng dụng của mình, bạn sẽ muốn sử dụng các chế độ xây dựng "profile" hoặc "release" của Flutter. Để biết thêm chi tiết, hãy xem các chế độ xây dựng của Flutter.

Quan trọng: Nếu bạn lo lắng về kích thước gói ứng dụng của mình, hãy xem Đo kích thước ứng dụng của bạn .

3. Terminal & editor

Tạo ứng dụng

Bạn có muốn chạy ứng dụng Flutter của mình trên web không? Phiên bản web của Flutter hiện có trên kênh beta. Để dùng thử, hãy xem phần Viết ứng dụng Flutter đầu tiên của bạn cho web codelab.

Sử dụng lệnh flutter create để tạo một dự án mới:

$ flutter create myapp
$ cd myapp

Các lệnh trên sẽ tạo một thư mục dự án Flutter có tên myapp chứa một ứng dụng demo đơn giản sử dụng Material Components.

Mẹo: Mã cho ứng dụng của bạn nằm trong lib/main.dart. Để có mô tả cấp cao về chức năng của mỗi khối mã, hãy xem các nhận xét ở đầu tệp đó.

Chạy ứng dụng

  1. Kiểm tra xem thiết bị Android có đang chạy không. Nếu không có gì được hiển thị, hãy làm theo hướng dẫn dành riêng cho thiết bị trên trang Cài đặt cho hệ điều hành của bạn.
    $ flutter devices
  2. Chạy ứng dụng bằng lệnh sau:
    $ flutter run​​

Cảnh báo: Khi khởi chạy ứng dụng của bạn từ máy Mac, nếu bạn thấy ERROR: Could not connect to lockdownd, error code -17, hãy đảm bảo rằng bạn đã tin cậy máy tính của mình.

Sau khi xây dựng ứng dụng hoàn tất, bạn sẽ thấy ứng dụng dành cho người mới bắt đầu trên thiết bị của mình.

Ứng dụng Starter trên iOS
Ứng dụng dành cho người mới bắt đầu

Thử hot reload

Flutter cung cấp một chu kỳ phát triển nhanh chóng với tính năng Stateful Hot Reload, có khả năng tải lại mã của một ứng dụng đang chạy trực tiếp mà không cần khởi động lại hoặc mất trạng thái ứng dụng. Thực hiện thay đổi đối với nguồn ứng dụng, hãy cho IDE hoặc công cụ dòng lệnh biết rằng bạn muốn hot reload (tải lại nóng) và xem sự thay đổi trong trình mô phỏng, trình giả lập hoặc thiết bị của bạn.

  1. Mở lib/main.dart.
  2. Thay đổi chuỗi
    'Bạn đã đẩy nút này nhiều lần'

    thành

    'Bạn đã nhấp vào nút này nhiều lần'

    Chú ý: Đừng dừng ứng dụng của bạn, hãy để ứng dụng của bạn chạy.
  3. Lưu các thay đổi của bạn: gọi Save All hoặc nhấp vào Hot Reload.
  4. Nhập vào cửa sổ đầu cuối.

Bạn sẽ thấy chuỗi được cập nhật trong ứng dụng đang chạy gần như ngay lập tức.

Profile hoặc release

Quan trọng: Đỗ không kiểm tra việc thực hiện các ứng dụng của bạn với gỡ lỗi và tải lại nóng kích hoạt.

Hiện tại bạn vẫn đang chạy ứng dụng của mình ở chế độ debug. Chế độ gỡ lỗi giao dịch hiệu suất cho các tính năng hữu ích của nhà phát triển như tải lại nóng và gỡ lỗi bước. Không có gì bất ngờ khi thấy hiệu suất chậm và hoạt ảnh lộn xộn trong chế độ gỡ lỗi. Khi bạn đã sẵn sàng phân tích hiệu suất hoặc phát hành ứng dụng của mình, bạn sẽ muốn sử dụng các chế độ xây dựng "profile" hoặc "release" của Flutter. Để biết thêm chi tiết, hãy xem các chế độ xây dựng của Flutter.

Quan trọng: Nếu bạn lo lắng về kích thước gói ứng dụng của mình, hãy xem Đo kích thước ứng dụng của bạn.

Nguồn: flutter.dev
» Tiếp: Viết ứng dụng Flutter đầu tiên của bạn, phần 1
« Trước: Thiết lập trình soạn thảo
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!