Hướng dẫn Hex Color trong Flutter

Using Hexadecimal Color Strings in Flutter: A Comprehensive Guide

Màu sắc đóng một vai trò quan trọng trong trải nghiệm người dùng của Flutter. Nó có thể làm tăng cường hoặc phá hủy diện mạo và cảm giác của ứng dụng của bạn. Chúng ta có thể biểu diễn màu sắc theo nhiều cách khác nhau, như RGB, ARGB, CMYK, HSV và HSL. Khi nhà thiết kế cung cấp cho bạn màu sắc, họ có thể sử dụng bất kỳ biến thể nào trong số này. RGB và ARGB rất phổ biến và chúng ta thường sử dụng chuỗi hex để biểu diễn chúng trong Flutter. Bài viết này sẽ giải thích cách chuyển đổi giữa các định dạng khác nhau và sử dụng chuỗi màu hex trong Dart và Flutter.

Lớp Color

Lớp Color là một lớp cơ bản trong API Flutter. Nó đại diện cho một số 32 bit. Một số 32 bit chỉ là một số nguyên Dart khác. Số này đại diện cho bốn giá trị nhỏ hơn: kênh alpha, red, green và blue. Kênh alpha đại diện cho độ mờ của màu sắc và các kênh red, green và blue đại diện cho chính màu sắc. Máy tính tạo ra màu sắc bằng cách kết hợp ánh sáng đỏ, xanh lá cây và xanh dương. ARGB hoặc (RGBA) là một hệ thống tính toán phổ biến để biểu diễn màu sắc.

Để tạo một màu sắc, hãy truyền một số nguyên vào hàm tạo. Ví dụ này đại diện cho màu đen. Không có giá trị alpha, red, green hoặc blue.

XEM THÊM:  Làm thế nào để loại bỏ gàu tức thì

Hệ thập lục phân

Một màu sắc thập lục phân là biểu diễn màu sắc dưới dạng thập lục phân, đó là một hệ thống đếm cơ số 16 sử dụng 16 chữ số (0-9 và A-F). Mỗi màu có một giá trị alpha, red, green và blue (ARGB). Chúng ta sử dụng hai chữ số trong dải 00-FF để biểu diễn mỗi giá trị. Định dạng của màu thập lục phân ARGB là AARRGGBB. AA là kênh alpha. Nó đại diện cho độ mờ của màu sắc. RR là giá trị red, GG là green và BB là blue.

Ngôn ngữ Dart cho phép chúng ta viết số nguyên trực tiếp dưới dạng thập lục phân. Chúng ta không cần thực hiện bất kỳ xử lý chuỗi đặc biệt hoặc chuyển đổi nào. Chúng ta tiền tố số bằng 0x. Đây là ví dụ về màu trắng.

Tiền tố 0xFF đại diện cho giá trị alpha, tức là mức độ độ trong suốt của màu sắc, trong đó 0x00 là hoàn toàn trong suốt và 0xFF là hoàn toàn không trong suốt. Mỗi giá trị ARGB cho màu trắng là 255.

Lưu ý rằng giá trị thập lục phân có sáu ký tự đại diện cho màu RGB. Điều này không bao gồm kênh alpha. Khi gặp một màu RGB, bạn có thể chuyển đổi nó thành giá trị ARGB bằng cách đặt FF phía trước. Ví dụ, màu trắng dưới dạng RGB là FFFFFF. Chúng ta có thể chuyển đổi nó thành ARGB với FFFFFFFF.

XEM THÊM:  Hướng dẫn may hoạt động IPPT

Chuyển đổi chuỗi thập lục phân thành màu sắc

Bạn có thể chuyển đổi chuỗi thập lục phân thành màu sắc trong Flutter. Điều này thường không cần thiết nhưng có thể hữu ích trong các tình huống đặc biệt. Ví dụ, bạn có thể cho phép người dùng nhập một màu sắc trong cài đặt ứng dụng. Bạn có thể lưu chuỗi này trong cài đặt và sau đó sử dụng số để đặt màu nền trong ứng dụng của bạn. Bạn cần lưu trữ tám ký tự đại diện cho số thập lục phân. Bạn cũng nên xác thực số trước khi lưu trữ nó.

Một cách dễ dàng để chuyển đổi một chuỗi thành một màu sắc là chuyển đổi nó thành một số nguyên trước, sau đó xây dựng một Color từ số nguyên đó. Đây là một hàm để làm điều đó. Nó sử dụng phương thức parse của kiểu int.

Chúng ta có thể sử dụng hàm này để đọc một chuỗi đại diện cho màu đỏ như sau:

Chúng ta có thể còn đi xa hơn và viết một phương thức mở rộng chuyển đổi một chuỗi thành một màu sắc.

Dưới đây là một ví dụ Flutter trực tiếp sử dụng các phương thức này:

Chuyển đổi giữa các định dạng khác

Nhà thiết kế không phải lúc nào cũng cung cấp cho bạn các số thập lục phân ARGB. Họ có thể cung cấp chúng dưới dạng các định dạng khác. Có nhiều công cụ trực tuyến khác nhau để chuyển đổi giữa các định dạng này.

  • Color Designer: Chuyển đổi giữa Hex RGB và CMYK
  • Convert a Color: công cụ tuyệt vời để chuyển đổi giữa nhiều định dạng
  • Google: có sẵn công cụ chuyển đổi dễ sử dụng.
XEM THÊM:  Hướng dẫn cách ủ thịt bò tại nhà

Google

Kết luận

Mã màu thập lục phân trong Flutter đơn giản và mạnh mẽ. Đây là một cách tiện lợi để biểu thị màu sắc trên tất cả các nền tảng. Bài viết này đã thảo luận về cách chuyển đổi giữa các định dạng màu sắc khác nhau, bao gồm RGB, ARGB, CMYK, HSV và HSL và cung cấp ví dụ về cách sử dụng chuỗi màu thập lục phân trong Flutter, bao gồm cách chuyển đổi chuỗi thập lục phân thành đối tượng Color. Để biết thêm thông tin, bạn có thể đọc về hệ thống tùy chỉnh màu sắc của Flutter.

Photo by Alexander Grey from Pexels

Đọc thêm: How To