Tự học Flutter 2023

New Dart

Làm quen với Dartpad

DartPad là một công cụ mã nguồn mở cho phép bạn thực hành với ngôn ngữ Dart trong bất kỳ trình duyệt nào. Nói cho đơn giản, nếu bạn muốn thực hành những gì đã học được liên quan đến ngôn ngữ Dart, thay vì phải cài đặt SDK, IDE bạn đơn giản là chỉ cần mở trình duyệt lên (Chrome, Edge, Safari...) sử dụng Dartpad là được. Nó cũng tương tự như Swift/Kotlin playground nếu như bạn đến từ iOS/Android.

Làm sao tải Dartpad?

Bạn không cần tải gì cả, những gì bạn cần là một trình duyệt bất kỳ, sau đó truy cập vào https://dartpad.dev

Giao diện cơ bản

Bên dưới là giao diện chính của Dartpad khi bạn lần đầu truy cập, mình có đánh số để tiện mô tả trong đoạn tiếp theo.

Nếu giao diện bạn thấy không như bên dưới, có thể là bạn đã từng truy cập Dartpad và làm gì đó trước đây rồi. Để reset về như bên dưới, bạn chọn Samples (số 2), trong danh sách xổ ra, tìm và chọn Hello World.

Giao diện chính của Dartpad

  • 1 Tên code mẫu (tên chương trình)
  • 2 Danh sách code mẫu có sẵn
  • 3 Khu vực viết code
  • 4 Khu vực hiển thị kết quả
  • 5 Khu vực tài liệu
  • 6 Khu vực thông tin chi tiết lỗi
  • 7 Nút để chạy chương trình
  • 8 Tạo chương trình mới
  • 9 Khôi phục code lại như code mẫu ban đầu

    • Lần đầu bạn truy cập Dartpad sẽ mở sẵn code mẫu chương trình Hello World. Tên code mẫu hiển thị ở số 1 như mình đánh dấu trên hình. Nằm ở bên cạnh đó (bấm vào số 2) là danh sách code mẫu có sẵn để bạn tham khảo. Danh sách code mẫu này không chỉ bao gồm mỗi Dart mà còn cả Flutter: counter, bloc, provider... Bạn sẽ biết về những cái này về sau này.

    Khu vực số 3 chính là nơi bạn viết code. Hiện tại đang là một đoạn code mẫu in ra bốn dòng từ ''hello 0'' đến ''hello 3''.

    Khu vực số 4 là nơi hiển thị kết quả chạy chương trình. Để chạy bạn bấm Run (số 7).

    Khu vực số 5: khi bạn đặt con trỏ ở một hàm nào đó ở khu vực 3, tài liệu về hàm đó sẽ hiển thị ở khu vực số 5 này. Ví dụ, khi bạn đặt con trỏ chuột ở hàm print, đây là những gì bạn sẽ thấy ở khu vực số 5:

    Khu vực document

    Khu vực số 6 là nơi hiển thị các thông tin lỗi (ở dạng hộp thoại). Ví dụ bạn viết sai lệnh print thành prints, đây là những gì hiển thị:

    Khu vực document - báo lỗi

    Số 7 là nút Run, dùng để chạy chương trình.

    Số 8 dùng khi bạn muốn tạo một chương trình mới.

    Số 9 sử dụng khi bạn đang code từ một code mẫu, trong khi chỉnh sửa vì lý do gì đó (ví dụ gặp lỗi) bạn muốn chương trình quay lại y thời điểm ban đầu, bấm nút này và chương trình sẽ quay lại y như code mẫu lúc ban đầu.

    Quy trình cơ bản

  • Viết code ở khu vực 3
  • Bấm chạy chương trình với nút Run (số 7)
  • Xem kết quả chương trình tại khu vực 4.
  • Nếu có lỗi, kiểm tra, sửa lỗi và chạy lại.

    • Lời kết

    Tại thời điểm này, bạn chưa làm quen với Dart, nên chưa cần phải viết dòng code nào. Tuy nhiên, bây giờ bạn đã nắm được cách sử dụng Dartpad, trong các bài viết tiếp theo, khi tìm hiểu về Dart chúng ta sẽ sử dụng Dartpad để thực hành.

    Chia sẻ