मैंने अपने फ़्लटर एप्लिकेशन में एसवीजी स्रोत के साथ एक छवि जोड़ने की कोशिश की।
new AssetImage("assets/images/candle.svg"))
लेकिन मुझे कोई दृश्य प्रतिक्रिया नहीं मिली। मैं स्पटर में एक एसवीजी चित्र कैसे प्रस्तुत कर सकता हूं?
जवाबों:
स्पंदन वर्तमान में एसवीजी का समर्थन नहीं करता है। अद्यतनों के लिए समस्या 1831 का पालन करें ।
अगर आपको पूरी तरह से वेक्टर ड्राइंग की आवश्यकता है, तो आप एपीआई का उपयोग कैसे करें , या देशी तरफ अपनी छवि को कैसे बढ़ाएं और इसे एक बिटमैप के रूप में फ़्लटर में पास करें, इसका एक उदाहरण के रूप में आप फ़्लटर लोगो विजेट देख सकते हैं Canvas
, लेकिन अब आपके लिए सबसे अच्छा शर्त शायद यह है उच्च-रिज़ॉल्यूशन रैस्टोराइज़्ड एसेट इमेज एम्बेड करें।
flutter_svg
पैकेज
फ़ॉन्ट बहुत सारे मामलों के लिए एक बढ़िया विकल्प है।
मैं एक कैनवास पर SVG को प्रस्तुत करने के लिए एक लाइब्रेरी पर काम कर रहा हूँ, यहाँ उपलब्ध है: https://github.com/dnfield/flutter.sg
अभी जैसा एपीआई है वैसा ही कुछ दिखेगा
new SvgPicture.asset('asset_name.svg')
संपत्ति सौंपने के लिए_name.svg (अपने माता-पिता के लिए आकार, उदा SizedBox
)। तुम भी एक निर्दिष्ट कर सकते हैं color
और blendMode
संपत्ति tinting के लिए ..
अब यह पब पर उपलब्ध है और न्यूनतम संस्करण 0.3.6 के साथ काम करता है। यह मामलों का एक गुच्छा संभालता है, लेकिन सब कुछ नहीं - अपडेट के लिए GitHub रेपो देखें और मुद्दों को दर्ज करें।
कॉलिन जैक्सन द्वारा संदर्भित मूल गिटहब मुद्दा वास्तव में मुख्य रूप से फ़्लटर में एसवीजी पर ध्यान केंद्रित करने के लिए नहीं है। मैंने इसके लिए यहां एक और मुद्दा खोला: https://github.com/flutter/flutter/issues/15501
Canvas
विधियों का उपयोग करके लिखा गया है ।
स्पटर समुदाय के डेवलपर्स ने svg फ़ाइलों को संभालने के लिए एक लीवर बनाया। हम इसका उपयोग कर सकते हैं
new SvgPicture.asset(
'assets/images/candle.svg',
height: 20.0,
width: 20.0,
allowDrawingOutsideViewBox: true,
),
मुझे यहां एसवीजी कार्यान्वयन का एक छोटा सा उदाहरण मिला ।
अभी के लिए चारों ओर का काम फोंट का उपयोग है
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 पर जाएं
- अपने एसवीजी आइकन अपलोड
करें
- डाउनलोड बटन पर क्लिक करें - आपको दो फाइलें
मिलेंगी 1. iconname.dart
2. iconname.ttf फ़ॉन्ट फ़ाइल
- इस फ़ाइल का उपयोग फ़्लटर और iconname.dart आयात करें
आप एनिमेशन बनाने के लिए भड़कना का उपयोग कर सकते हैं और संपत्ति के रूप में .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 Images - https://pub.dev/packages/flutter_svg रेंडर करने के लिए कर सकते हैं
उदाहरण -
Container(
child: SvgPicture.asset("assets/images/yourImage.svg")
)
flutter_svg 0.14.0
पैकेज का उपयोग करने के लिए सरल का उपयोग करने की कोशिश करें यह आकर्षण की तरह काम करता है अधिक जानकारी pub.dev/packages/flutter_svg , इस आदमी के लिए सभी धन्यवाद github.com/dnfield जिन्होंने क्रोम के svg रेंडरिंग लॉजिक को डार्ट के लिए