การแสดงผล SVG แบบกระพือปีก

ฉันพยายามเพิ่มรูปภาพที่มีแหล่ง SVG ลงในแอปพลิเคชัน Flutter ของฉัน

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

แต่ฉันไม่ได้รับความคิดเห็นใด ๆ ฉันจะแสดงภาพ SVG ใน Flutter ได้อย่างไร

ขณะนี้ Flutter ไม่รองรับ SVG ติดตามการอัปเดตฉบับ 1831

หากคุณต้องการการวาดภาพเวกเตอร์อย่างแน่นอนคุณสามารถดูวิดเจ็ต Flutter Logoเป็นตัวอย่างของวิธีการวาดโดยใช้CanvasAPI หรือแรสเตอร์รูปภาพของคุณในด้านเนทีฟและส่งต่อไปยัง Flutter เป็นบิตแมป แต่สำหรับตอนนี้ทางออกที่ดีที่สุดของคุณคือ ฝังรูปภาพเนื้อหาแรสเตอร์ที่มีความละเอียดสูง

แบบอักษรเป็นตัวเลือกที่ดีสำหรับหลาย ๆ กรณี

ฉันทำงานเกี่ยวกับไลบรารีเพื่อเรนเดอร์ SVG บนผืนผ้าใบอยู่ที่นี่: https://github.com/dnfield/flutter_svg

API ณ ตอนนี้จะมีลักษณะดังนี้

new SvgPicture.asset('asset_name.svg')

เพื่อแสดงผล asset_name.svg (ขนาดเป็นพาเรนต์เช่นกSizedBox) คุณยังสามารถระบุcolorและblendModeสำหรับการย้อมสีเนื้อหา ..

ตอนนี้มีให้บริการในผับและใช้งานได้กับ Flutter เวอร์ชัน 0.3.6 เป็นอย่างต่ำ จัดการได้หลายกรณี แต่ไม่ใช่ทุกอย่าง - ดูที่ GitHub repo สำหรับการอัปเดตและไฟล์ปัญหา

ปัญหา GitHub ดั้งเดิมที่โคลินแจ็คสันอ้างถึงนั้นไม่ได้หมายถึงการมุ่งเน้นไปที่ SVG ใน Flutter เป็นหลัก ฉันเปิดปัญหาอื่นที่นี่สำหรับสิ่งนั้น: https://github.com/flutter/flutter/issues/15501

นักพัฒนาจากชุมชน Flutter ได้สร้าง lib เพื่อจัดการไฟล์ svg เราสามารถใช้เป็น

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

ผมพบว่าเป็นตัวอย่างเล็ก ๆ ของ SVG การดำเนินงานที่นี่

วิธีแก้ไขสำหรับตอนนี้คือใช้แบบอักษร

https://icomoon.io/

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

การใช้งาน

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

แทนที่ ### เช่น (906)

คุณสามารถทำตามขั้นตอนด้านล่าง
- ไปที่http://fluttericon.com
- อัปโหลดไอคอน SVG ของคุณ
- คลิกที่ปุ่มดาวน์โหลด
- คุณจะได้รับสองไฟล์
1. iconname.dart
2. ไฟล์ฟอนต์ iconname.ttf
- ใช้ไฟล์นี้ในการกระพือ & นำเข้า iconname.dart

คุณสามารถใช้ flare เพื่อสร้างภาพเคลื่อนไหวและนำเข้า. flr เป็นเนื้อหาได้

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");
  }
}

ไปที่ flare_flutter https://pub.dev/packages/flare_flutter

คุณสามารถใช้ไลบรารีนี้เพื่อแสดงภาพ SVG - https://pub.dev/packages/flutter_svg

ตัวอย่าง -

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