Ảnh SVG Flutter: đóng gói, đặt kích thước và kiểm tra

Để hiển thị tài nguyên SVG trong Flutter, thêm flutter_svg, khai báo tệp trong pubspec.yaml và tải cùng đường dẫn đó bằng SvgPicture.asset. Cho widget kích thước hoặc ràng buộc bố cục phù hợp, rồi kiểm tra hình trong ứng dụng. Hàm khởi tạo tài nguyên của gói mô tả cách tải đó.

Giữ hai câu hỏi riêng: ứng dụng đã tải tệp dự định chưa, và trình hiển thị có tái hiện hình dự định không? Xuất lại hình không sửa được khóa tài nguyên viết sai. Sửa khóa không đơn giản hóa hiệu ứng không được hỗ trợ.

Hướng dẫn này dùng hình đồi và mặt trời tự tạo để các bước kiểm tra dễ quản lý. Mã theo API được tài liệu hóa; không phải báo cáo thử nghiệm ứng dụng đã biên dịch.

Bắt đầu với nguồn nhỏ dễ kiểm tra

Tạo assets/illustrations/hills.svg trong dự án Flutter:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48">
  <circle cx="49" cy="11" r="6" fill="#e99b30"/>
  <path d="M4 42L24 14L44 42Z" fill="#167d8d"/>
  <path d="M28 42L43 23L60 42Z" fill="#233b63"/>
</svg>

Nguồn có hai đồi tam giác chồng nhau và mặt trời hổ phách rời. Nó dùng màu tô rõ ràng, không có chữ hoặc ảnh liên kết và để khe hở nhìn thấy giữa mặt trời và đồi. Những chi tiết này cho bạn danh sách tiêu chí kiểm tra ngắn khi kiểm tra ứng dụng.

Giữ bản sao tệp đơn giản này khi đưa hình riêng vào về sau. Nếu nguồn nhỏ hoạt động nhưng bản thay thế thất bại, so sánh cấu trúc trước khi đổi toàn bộ thiết lập tải.

Tài nguyên SVG Flutter cũng là cách bàn giao khác với XML Android VectorDrawable. Nếu đích là tài nguyên drawable gốc của Android, dùng hướng dẫn chuẩn bị Android VectorDrawable thay vì coi hai định dạng tệp có thể thay nhau.

Thêm gói và khai báo đúng tệp

Từ thư mục gốc dự án Flutter, dùng lệnh cài đặt chính thức:

flutter pub add flutter_svg

Sau đó thêm mục tài nguyên này dưới phần flutter: có sẵn của pubspec.yaml:

flutter:
  assets:
    - assets/illustrations/hills.svg

Ghép mục vào cấu hình hiện tại thay vì tạo phần flutter: thứ hai. Giữ cách thụt lề như ví dụ. Tài liệu tài nguyên Flutter xác định các đường dẫn tương đối với pubspec.yaml và giải thích cách tệp được liệt kê vào gói ứng dụng.

Dùng cùng cách viết, chữ hoa thường và cấu trúc thư mục trong tên tệp, khai báo và lời gọi Dart. Với kiểm tra đầu tiên, mục tệp tường minh dễ so sánh hơn mục thư mục rộng. Nếu về sau khai báo thư mục, Flutter mô tả rằng mục thư mục bao gồm tệp trực tiếp trong đó; thư mục lồng cần mục riêng.

Sau khi đổi cấu hình tài nguyên, dựng lại và chạy ứng dụng bằng quy trình phát triển thông thường. Đừng cho rằng tệp thấy trong trình chỉnh sửa đã nằm trong ứng dụng bạn đang xem.

Tải hình vào hộp xác định

Thêm các import này vào tệp Dart chứa widget:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

Đặt widget này trong phần phù hợp của màn hình:

SvgPicture.asset(
  'assets/illustrations/hills.svg',
  width: 128,
  height: 96,
  fit: BoxFit.contain,
  semanticsLabel: 'Sun above two hills',
  errorBuilder: (context, error, stackTrace) =>
      const Text('Illustration unavailable'),
)

Hộp theo tỷ lệ nguồn. Kiểm tra mặt trời rời, màu của cả hai đồi và lề ngoài trước khi thử kích thước nhỏ hơn. Sau đó dùng kích thước thành phần thực yêu cầu; các số trên là ví dụ, không phải kích thước tối thiểu hay khuyến nghị hiệu năng.

Tài liệu hàm khởi tạo khuyến nghị kích thước rõ ràng hoặc ràng buộc bố cục chặt để việc tải không đổi bố cục bất ngờ. Nếu hình trông quá nhỏ trong hộp, kiểm tra khoảng trống trong viewBox cùng kích thước widget.

Nhãn mô tả mục đích của hình đứng riêng này. API semanticsLabel nối nó với nhãn ngữ nghĩa của hình. Với ảnh trang trí cạnh chữ đã truyền đạt ý nghĩa, thay vào đó, cân nhắc loại ảnh khỏi thông tin ngữ nghĩa dành cho công nghệ hỗ trợ. Tùy chọn excludeFromSemantics của hàm khởi tạo được ưu tiên hơn nhãn. Kiểm tra ý nghĩa mà công nghệ hỗ trợ đọc cho cả thành phần thay vì đặt nhãn từng hình riêng.

Phân biệt nội dung chờ tải với lỗi

Chỉ báo tải không chứng minh SVG đã được chấp nhận. Gói cung cấp placeholderBuilder cho giai đoạn lấy hoặc giải mã, còn API errorBuilder hiện tại cung cấp widget khi tải ảnh thất bại.

Ví dụ trên dùng văn bản dự phòng ngắn. Trong phát triển, chủ động đổi đường dẫn Dart thành tên tệp không tồn tại và kiểm tra bạn có nhận ra lỗi không. Khôi phục đường dẫn đúng trước khi tiếp tục. Điều này thử cách trình bày lỗi mà không đổi chính hình.

Sau đó thử nguồn thực tế. Nếu vẫn thất bại, kiểm tra đầu ra chẩn đoán và so sánh đường dẫn khai báo trước. Ví dụ mạng tình cờ hiển thị SVG khác không chứng minh tệp cục bộ được đóng gói hoặc tính năng của nó được hỗ trợ.

Quyết định giữ bảng màu hay áp dụng màu phủ

Để colorFilter không được đặt khi các đồi cần giữ xanh ngọc và navy với mặt trời hổ phách. Với cách xử lý chủ động một màu, thêm bộ lọc như:

colorFilter: const ColorFilter.mode(
  Color(0xFF175CD3),
  BlendMode.srcIn,
),

Gói mô tả mẫu phủ màu này. Tài liệu BlendMode của Flutter giải thích srcIn dùng độ đục của đích trong khi bỏ qua kênh màu. Vì vậy màu phủ đồng đều loại bỏ khác biệt bảng màu nguồn; đó là lựa chọn thiết kế, không phải cách sửa bảo toàn màu.

Với các đồi, kiểm tra mất tương phản giữa hai tam giác chồng nhau có làm minh họa khó đọc hơn không. Giữ bảng màu gốc nếu những vùng đó cần riêng biệt. Gói cũng mô tả ColorMapper cho thay thế có chọn lọc, nhưng bắt đầu với trường hợp không lọc đơn giản hơn khi chẩn đoán sai khác.

Chỉ đơn giản hóa tính năng sau khi tệp tải được

Tài liệu flutter_svg khuyến nghị thuộc tính trình bày khi xuất từ Illustrator vì hỗ trợ CSS chưa đầy đủ, và ảnh nhúng thay vì liên kết ngoài. Nó cũng cung cấp kiểm tra tương thích bằng trình biên dịch. Làm theo phép kiểm tra đó trong môi trường Flutter/Dart của bạn khi cần điều tra tài nguyên phức tạp.

Bản xem trước trình duyệt là tham chiếu hữu ích cho diện mạo dự định; không chứng minh mọi tính năng SVG hiển thị giống hệt qua gói. Giữ hình gốc và đơn giản hóa bản sao từng thay đổi một.

Nếu nguồn có chữ, quyết định nó nên là chữ ứng dụng hay hình cố định. Hướng dẫn thay đổi phông SVG giải thích vì sao diện mạo có thể phụ thuộc xử lý chữ và phông. Đừng đồ lại nhãn chỉ để sửa đường dẫn tài nguyên.

Với bộ tài nguyên UI, so sánh cùng nhau kích thước thị giác và khoảng cách. Hướng dẫn chuẩn bị biểu tượng bộ UI giúp kiểm tra nhất quán đó.

Dùng vector hóa khi nguồn cần khôi phục

Giữ SVG sạch có sẵn. Ảnh chụp hoặc nền có chất liệu có thể phù hợp hơn khi bàn giao dạng raster thích hợp; đổi phần mở rộng không tạo hình học vector hữu ích.

Nếu minh họa đơn giản chỉ còn PNG thô, quy trình PNG sang SVG của PerfectVector có thể giúp chuẩn bị bản chỉnh sửa được. Cắt sát hình, kiểm tra bản xem trước tìm hình thiếu và vùng nền không mong muốn, rồi tải SVG xuống. Thêm tệp vào gói ứng dụng và lặp kiểm tra tải, bảng màu, kích thước, ngữ nghĩa.

Với ví dụ đồi, tìm mặt trời rời và sự phân biệt hai sườn đồi có màu. Xác nhận tệp chứa cấu trúc dự định; hướng dẫn raster nhúng giải thích vì sao vỏ SVG vẫn có thể chứa pixel.

Đánh giá tài nguyên trong ứng dụng trước khi chọn chiến lược tối ưu. Quy trình này không cam kết chung rằng SVG nhỏ hơn hoặc nhanh hơn PNG.

Nếu dùng lại hình trong ứng dụng .NET MAUI, làm theo quy trình MAUI từ nguồn sang PNG. Dự án giữ bản SVG chính còn view tham chiếu PNG được chuẩn bị khi dựng.

Câu hỏi thường gặp

Tôi thêm ảnh SVG vào Flutter thế nào? Thêm flutter_svg, khai báo tài nguyên SVG trong pubspec.yaml và tải đường dẫn khớp bằng SvgPicture.asset. Đặt kích thước hoặc ràng buộc phù hợp và kiểm tra kết quả.

Vì sao SVG cục bộ không xuất hiện? Kiểm tra khai báo tài nguyên, đường dẫn chính xác, lỗi tải và bố cục trước. Nếu nguồn đơn giản hoạt động, so sánh cấu trúc và tính năng hỗ trợ của hình bị lỗi.

Vì sao tất cả màu trở thành giống nhau? Bộ lọc màu srcIn đồng đều thay bảng màu nhìn thấy bằng màu phủ. Bỏ bộ lọc khi màu gốc cần giữ riêng biệt.

Tôi có bắt buộc đổi PNG thành SVG cho Flutter không? Không. Dùng tài nguyên raster phù hợp khi hợp với hình. Vector hóa là tùy chọn khi khôi phục hình chỉnh sửa được từ nguồn raster đơn giản.

Nguồn tham khảo

1. flutter_svg — cài đặt — Cài gói và import Dart.
2. Flutter — thêm tài nguyên và ảnh — Khai báo tài nguyên, đường dẫn và đóng gói.
3. flutter_svg — SvgPicture.asset — Tải tài nguyên, kích thước, căn khớp và điều khiển ngữ nghĩa.
4. flutter_svg — errorBuilder — Trình bày lỗi riêng với nội dung chờ tải.
5. flutter_svg — semanticsLabel — Mục đích ngữ nghĩa của hình.
6. Flutter — BlendMode — Xử lý màu srcIn dựa trên độ đục.
7. flutter_svg — tài liệu gói — Phủ màu, ánh xạ màu có chọn lọc, hướng dẫn xuất và kiểm tra tương thích.

Bắt đầu với một tài nguyên khai báo và kiểm tra đường dẫn, bảng màu, kích thước, ý nghĩa trong ứng dụng. Nếu minh họa raster cần khôi phục, chuẩn bị một bản SVG, kiểm tra các hình và chạy cùng các bước kiểm tra trước khi thêm vào bộ tài nguyên.