स्पंदन एसवीजी प्रतिपादन


92

मैंने अपने फ़्लटर एप्लिकेशन में एसवीजी स्रोत के साथ एक छवि जोड़ने की कोशिश की।

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

लेकिन मुझे कोई दृश्य प्रतिक्रिया नहीं मिली। मैं स्पटर में एक एसवीजी चित्र कैसे प्रस्तुत कर सकता हूं?


4
flutter_svg 0.14.0 पैकेज का उपयोग करने के लिए सरल का उपयोग करने की कोशिश करें यह आकर्षण की तरह काम करता है अधिक जानकारी pub.dev/packages/flutter_svg , इस आदमी के लिए सभी धन्यवाद github.com/dnfield जिन्होंने क्रोम के svg रेंडरिंग लॉजिक को डार्ट के लिए
चित्रित किया है

जवाबों:


65

स्पंदन वर्तमान में एसवीजी का समर्थन नहीं करता है। अद्यतनों के लिए समस्या 1831 का पालन करें ।

अगर आपको पूरी तरह से वेक्टर ड्राइंग की आवश्यकता है, तो आप एपीआई का उपयोग कैसे करें , या देशी तरफ अपनी छवि को कैसे बढ़ाएं और इसे एक बिटमैप के रूप में फ़्लटर में पास करें, इसका एक उदाहरण के रूप में आप फ़्लटर लोगो विजेट देख सकते हैं Canvas, लेकिन अब आपके लिए सबसे अच्छा शर्त शायद यह है उच्च-रिज़ॉल्यूशन रैस्टोराइज़्ड एसेट इमेज एम्बेड करें।


इसके अलावा, अगर आपको रंग की आवश्यकता नहीं है, तो आप हमेशा फ़ॉन्ट मार्ग पर जा सकते हैं जिस तरह से आइकन पैकेज करता है।
११:२२ बजे

अच्छी तरह से सब के बाद वह बस एक svg छवि किसी भी svg पुस्तकालय इस तरह कर सकता है रेंडर करने के लिए की जरूरत है pub.dev/packages/flutter_svg
maheshmnj

यह मुद्दा 13 फरवरी 2016 से खुला है। हमें कब तक इंतजार करने की जरूरत है?
ब्लडलॉस

@BloodLoss डैन फील्ड के जवाब को देखो। उपयोगकर्ता flutter_svgपैकेज
kovalyovi

75

फ़ॉन्ट बहुत सारे मामलों के लिए एक बढ़िया विकल्प है।

मैं एक कैनवास पर 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


विषय से थोड़ा हटकर लेकिन क्या इसमें iOS का समर्थन है? जहाँ तक मुझे पता है, iOS पीडीएफ प्रारूप में वैक्टर का समर्थन करता है, तो मुझे बस उत्सुकता है अगर यह iOS पर वैक्टर प्रदान करने के लिए इस्तेमाल किया जा सकता है
MRainzo

3
यह किसी भी मंच पर काम करना चाहिए स्पंदन समर्थन करता है। यह सब डार्ट में Canvasविधियों का उपयोग करके लिखा गया है ।
डैन फील्ड

1
क्यों यह पूर्वावलोकन के बजाय नवीनतम स्पंदन स्थिर का समर्थन नहीं करता
minigeek

हाय दान, क्या आप इसके लिए समर्थन भी जोड़ सकते हैं - dart : svg पुस्तकालय - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html ? स्पंदन है dart2 का समर्थन करता है? मैं कई एसवीजीईएल को एक बड़ी क्रमबद्ध स्ट्रिंग में संयोजित करना चाहता हूं और फिर एसवीजी को प्रस्तुत करने के लिए अपनी लाइब्रेरी का उपयोग करता
हूं

डार्ट: svg का उपयोग HTML और dart2js के साथ किया जाता है। यह इससे बहुत अलग है।
दान फील्ड

25

स्पटर समुदाय के डेवलपर्स ने svg फ़ाइलों को संभालने के लिए एक लीवर बनाया। हम इसका उपयोग कर सकते हैं

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

मुझे यहां एसवीजी कार्यान्वयन का एक छोटा सा उदाहरण मिला ।


5
सिर्फ FYI करें - यह एक आधिकारिक / पहला पार्टी प्लगइन नहीं है। उस ने कहा, इसे बहुत सारे सामान्य उपयोग के मामलों का समर्थन करना चाहिए।
दान क्षेत्र

21

अभी के लिए चारों ओर का काम फोंट का उपयोग है

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) बदलें


मैं इसका उपयोग कैसे कर सकता हूं? मैं संपत्ति में एक svg फ़ाइल / svg / mysvg.svg बताता हूं कि मैं हेक्स को पथ से प्रतिस्थापित नहीं कर सकता। 1 तर्क एक अंतर है।
फ्रंटमोब

9

आप नीचे दिए गए चरणों का पालन कर सकते हैं
- http://fluttericon.com पर जाएं
- अपने एसवीजी आइकन अपलोड
करें
- डाउनलोड बटन पर क्लिक करें - आपको दो फाइलें
मिलेंगी 1. iconname.dart
2. iconname.ttf फ़ॉन्ट फ़ाइल
- इस फ़ाइल का उपयोग फ़्लटर और iconname.dart आयात करें


3

आप एनिमेशन बनाने के लिए भड़कना का उपयोग कर सकते हैं और संपत्ति के रूप में .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


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.