Hiển thị SVG Flutter

Tôi đã thử thêm một hình ảnh có nguồn SVG vào ứng dụng rung của mình.

new AssetImage("assets/images/candle.svg"))

Nhưng tôi không nhận được bất kỳ phản hồi trực quan nào. Làm cách nào để hiển thị ảnh SVG trong Flutter?

Flutter hiện không hỗ trợ SVG. Theo dõi vấn đề 1831 để cập nhật.

Nếu bạn thực sự cần vẽ vector, bạn có thể xem tiện ích Flutter Logo như một ví dụ về cách vẽ bằng cách sử dụng CanvasAPI hoặc sắp xếp hình ảnh của bạn ở phía gốc và chuyển nó đến Flutter dưới dạng bitmap, nhưng hiện tại cách tốt nhất có lẽ là nhúng các hình ảnh tài sản được phân giải có độ phân giải cao.

Phông chữ là một lựa chọn tuyệt vời cho nhiều trường hợp.

Tôi đang làm việc trên một thư viện để hiển thị SVG trên canvas, có sẵn tại đây: https://github.com/dnfield/flutter_svg

API kể từ bây giờ sẽ trông giống như

new SvgPicture.asset('asset_name.svg')

để hiển thị asset_name.svg (có kích thước bằng với cha của nó, ví dụ: a SizedBox). Bạn cũng có thể chỉ định một colorvà blendModeđể nhuộm màu nội dung ..

Nó hiện đã có trên pub và hoạt động với phiên bản Flutter tối thiểu là 0.3.6. Nó xử lý một loạt các trường hợp nhưng không phải tất cả mọi thứ - hãy xem repo GitHub để biết các bản cập nhật và các vấn đề về tệp.

Vấn đề GitHub ban đầu do Colin Jackson tham chiếu thực sự không có ý nghĩa chủ yếu tập trung vào SVG trong Flutter. Tôi đã mở một vấn đề khác ở đây cho điều đó: https://github.com/flutter/flutter/issues/15501

Các nhà phát triển từ cộng đồng Flutter đã tạo một lib để xử lý các tệp svg. Chúng ta có thể sử dụng nó như

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

Tôi đã tìm thấy một ví dụ nhỏ về việc triển khai SVG ở đây .

Công việc hiện tại là sử dụng phông chữ

https://icomoon.io/

  fonts:
   - family: icomoon
     fonts:
       - asset: assets/fonts/icomoon.ttf

Useage

  static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
  static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');

Thay thế ### ví dụ: (906)

Bạn có thể làm theo các bước dưới đây
- truy cập http://fluttericon.com
- tải lên các biểu tượng SVG của bạn
- nhấp vào nút tải xuống
- bạn sẽ nhận được hai tệp
1.
tệp phông chữ iconname.dart 2. \ iconname.ttf
- sử dụng tệp này trong nháy mắt & import iconname.dart

Bạn có thể sử dụng flare để tạo hoạt ảnh và chỉ cần nhập .flr làm nội dung

import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
  }
}

truy cập flare_flutter https://pub.dev/packages/flare_flutter

Bạn có thể sử dụng thư viện này để hiển thị Hình ảnh SVG - https://pub.dev/packages/flutter_svg

Thí dụ -

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)