Flutter: Tạo máy đo độ (Sử dụng thư viện syncfusion_flutter_gauges)

Thư viện syncfusion_flutter_gauges bao gồm các tiện ích trực quan hóa dữ liệu Máy đo tuyến tính và Máy đo xuyên tâm (còn gọi là máy đo hình tròn) để tạo các máy đo hoạt hình, tương tác, hiện đại.

Máy đo tuyến tính(Linear Gauge) được sử dụng để hiển thị dữ liệu theo tỷ lệ tuyến tính, trong khi Máy đo xuyên tâm(Radial Gauge) được sử dụng để hiển thị dữ liệu theo tỷ lệ tròn. Cả hai thước đo đều có một bộ tính năng phong phú, chẳng hạn như trục, phạm vi, con trỏ, tương tác mượt mà và hoạt ảnh hoàn toàn có thể tùy chỉnh và mở rộng.

Cách sử dụng :

Bước 1: Thêm thư viện syncfusion_flutter_gauges vào dự án

Thêm thư viện vào chương trình

Bước 2: Tạo 1 widget cha được định sẵn kích thước để chứa máy đo độ của bạn

Tạo chiều dài, chiều rộng của máy đo độ

Chúng ta cần tạo 1 widget được định sẵn kích thước do kích thước máy đo(Gauge) được định dạng gián tiếp qua widget cha.

Bước 3: Tạo máy đo của riêng bạn bằng cách custom các tính năng

1. Tính năng đo tuyến tính(Linear gauge features)

Orientation – Máy đo tuyến tính có thể được đặt thành hướng dọc hoặc ngang.
Axis – Trục Linear Gauge là một độ đo với một tập hợp các giá trị có thể được vẽ lên. Một trục có thể được tùy chỉnh bằng cách thay đổi độ dày và kiểu cạnh. Bạn cũng có thể đảo ngược trục

Labels and ticks – Các thành phần trục Linear Gauge, chẳng hạn như nhãn, dấu tick chính và dấu tick phụ, có thể được tùy chỉnh theo các kiểu khác nhau.

Ranges – Phạm vi là một phần tử trực quan giúp bạn hình dung nhanh vị trí của một phạm vi trên đường trục. Nhiều phạm vi với các kiểu khác nhau có thể được thêm vào một thước đo tuyến tính.

Pointers – Một con trỏ được sử dụng để chỉ ra một giá trị cụ thể trên một trục. Tiện ích có ba loại con trỏ: con trỏ đánh dấu hình(shape marker pointer), con trỏ đánh dấu tiện ích(widget marker pointer) và con trỏ thanh(bar pointer). Tất cả các con trỏ có thể được tùy chỉnh khi cần thiết. Bạn có thể thêm nhiều con trỏ trong một thước đo tuyến tính.

Tương tác con trỏ – Con trỏ đánh dấu hình dạng và widget trong Máy đo tuyến tính có thể được di chuyển từ giá trị này sang giá trị khác bằng cử chỉ vuốt hoặc kéo.

Drag behavior – Cung cấp tùy chọn để thay đổi hành vi kéo của con trỏ đánh dấu, khi thước đo tuyến tính có nhiều con trỏ. Các hành vi kéo có sẵn là ‘’ free ‘’ và ‘’ constraint ‘’.
Animation – Tất cả các yếu tố đánh giá có thể được tạo hoạt ảnh theo cách trực quan hấp dẫn. Làm sinh động các phần tử đo khi chúng đang tải hoặc khi giá trị của chúng thay đổi.

2. Tính năng đo xuyên tâm(Radial gauge features)

Axes – Trục đo hướng kính là một cung tròn trong đó một tập hợp các giá trị được hiển thị dọc theo tỷ lệ tuyến tính hoặc tùy chỉnh dựa trên các yêu cầu thiết kế. Các phần tử trục, chẳng hạn như nhãn, dấu tick và đường trục, có thể được tùy chỉnh dễ dàng bằng các thuộc tính tích hợp sẵn.

Ranges – Phạm vi thước đo là một yếu tố trực quan giúp hình dung nhanh vị trí của một giá trị nằm trên trục. Văn bản có thể dễ dàng được chú thích trong phạm vi để cải thiện khả năng đọc.

Pointers – Con trỏ được sử dụng để chỉ ra các giá trị trên một trục. Nó có bốn loại con trỏ: con trỏ kim, con trỏ đánh dấu, con trỏ phạm vi và con trỏ widget. Tất cả các con trỏ có thể được tùy chỉnh khi cần thiết.

Animation – Tạo hoạt ảnh cho con trỏ theo cách hấp dẫn trực quan khi con trỏ di chuyển từ giá trị này sang giá trị khác. Máy đo hỗ trợ các hoạt ảnh con trỏ khác nhau. Cũng có thể áp dụng hoạt ảnh tải ban đầu cho máy đo.

Pointer interaction – Máy đo xuyên tâm cung cấp tùy chọn để kéo con trỏ từ giá trị này sang giá trị khác và cũng hiển thị lớp phủ trong khi kéo. Nó được sử dụng để thay đổi giá trị trong thời gian chạy.