ফ্লুর এসভিজি রেন্ডারিং


90

আমি আমার ফ্লটার অ্যাপ্লিকেশনটিতে একটি এসভিজি উত্স সহ একটি চিত্র যুক্ত করার চেষ্টা করেছি।

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

তবে আমি কোনও ভিজ্যুয়াল প্রতিক্রিয়া পাইনি। আমি কীভাবে বিড়বিড় করে কোনও এসভিজি ছবি রেন্ডার করতে পারি?


4
সহজ ব্যবহার ব্যবহার করার চেষ্টা করুন flutter_svg 0.14.0 প্যাকেজ তা এখানে কবজ আরও তথ্যের মত কাজ করে pub.dev/packages/flutter_svg এই লোক সকল ধন্যবাদ, github.com/dnfield যারা ডার্ট করতে Chrome এর SVG রেন্ডারিং যুক্তিবিজ্ঞান বৈশিষ্ট্যসমূহ নিয়ে আসা
maheshmnj

উত্তর:


63

ফ্লাটার বর্তমানে এসভিজি সমর্থন করে না। আপডেটের জন্য 1831 ইস্যুটি অনুসরণ করুন ।

আপনার যদি ভেক্টর অঙ্কনের প্রয়োজন হয় তবে আপনি কীভাবে এপিআই ব্যবহার করে আঁকবেন, বা নিজের চিত্রটি স্থানীয় দিকের দিকে ছড়িয়ে দিতে এবং বিটম্যাপ হিসাবে এলোমেলোভাবে পাস করতে পারেন তার উদাহরণ হিসাবে আপনি ফ্লটার লোগো উইজেট দেখতে পারেন Canvas, তবে আপাতত আপনার সেরা বেটটি সম্ভবত এম্বেড করুন উচ্চ-রেজোলিউশন রাস্টারযুক্ত সম্পদ চিত্রগুলি।


এছাড়াও যদি আপনার রঙের প্রয়োজন না হয় তবে আপনি সর্বদা আইকনস প্যাকেজটির মতো ফন্টের পথে যেতে পারেন।
প্রোডিয়া

সর্বোপরি তাঁর কেবল একটি এসভিজি চিত্র রেন্ডার করার দরকার পরে কোনও এসভিজি লাইব্রেরি এই পাব এর
প্যাকেজ /

ইস্যুটি 13 ফেব্রুয়ারী 2016 থেকে উন্মুক্ত we আমাদের কতক্ষণ অপেক্ষা করতে হবে?
ব্লাডলস

71

হরফ অনেক ক্ষেত্রে ক্ষেত্রে দুর্দান্ত বিকল্প।

আমি একটি ক্যানভাসে এসভিজি রেন্ডার করার জন্য একটি লাইব্রেরিতে কাজ করছি যা এখানে পাওয়া যায়: https://github.com/dnfield/flutter_svg

এই মুহুর্তে এপিআই এর মতো কিছু হবে

new SvgPicture.asset('asset_name.svg')

asset_name.svg রেন্ডার করতে (এর পিতামাতার আকারের, উদাহরণস্বরূপ ক SizedBox)। এছাড়াও আপনি একটি নির্দিষ্ট করতে পারেন colorএবং blendModeসম্পদ রঙ জন্য ..

এটি এখন পাব এ উপলব্ধ এবং সর্বনিম্ন বিড়বিড় সংস্করণ 0.3.6 এর সাথে কাজ করে। এটি গুচ্ছ কেসগুলি পরিচালনা করে তবে সমস্ত কিছুই নয় - আপডেটের জন্য এবং সমস্যাগুলি ফাইল করার জন্য গিটহাব রেপো দেখুন।

কলিন জ্যাকসন উল্লেখ করেছেন মূল গিটহাব ইস্যুটি মূলত ফ্লুটারে এসভিজির উপর দৃষ্টি নিবদ্ধ করা নয়। আমি তার জন্য এখানে আর একটি সমস্যা খুলেছি: https://github.com/flutter/flutter/issues/15501


সামান্য অফ টপিক তবে এর কি আইওএস সমর্থন রয়েছে? যতদূর আমি জানি, আইওএস পিডিএফ ফর্ম্যাটে ভেক্টরকে সমর্থন করে তাই আমি কেবল কৌতূহল বোধ করি যদি এটি আইওএস-তে ভেক্টরগুলিও সরবরাহ করতে ব্যবহার করা যেতে পারে
এমআরইনজো

4
এটি কোনও প্ল্যাটফর্ম ফ্লার্ট সমর্থন করে work এগুলি সবই Canvasপদ্ধতিতে ডার্টে লেখা ।
ড্যান ফিল্ড

4
এটি এর পরিবর্তে সাম্প্রতিক
বিড়বিড়

হাই ড্যান, আপনি কি - ডার্ট: এসভিজি লাইব্রেরি - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html এর জন্য সমর্থন যোগ করতে পারেন ? ঝাঁকুনির dart2 সমর্থন আছে? আমি একাধিক এসভিজিএলমেন্টসকে একটি বৃহত সিরিয়ালাইজড স্ট্রিংয়ের সাথে সংযুক্ত করতে চাই এবং তারপরে আপনার গ্রন্থাগারটি এসভিজি রেন্ডার করতে ব্যবহার করব
abhijat_saxena

ডার্ট: এসভিজি এইচটিএমএল এবং ডার্ট 2 জেএস সহ ব্যবহৃত হয়। এটি এর চেয়ে খুব আলাদা।
ড্যান ফিল্ড

25

ফ্লিটার সম্প্রদায়ের বিকাশকারীরা এসভিজি ফাইলগুলি হ্যান্ডেল করার জন্য একটি লিব তৈরি করেছিলেন। আমরা এটি হিসাবে ব্যবহার করতে পারেন

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

আমি এখানে এসভিজি বাস্তবায়নের একটি ছোট উদাহরণ পেয়েছি ।


4
শুধু এফওয়াইআই - এটি কোনও অফিসিয়াল / প্রথম পক্ষের প্লাগইন নয়। এটি বলেছিল, এটি প্রচলিত ব্যবহারের ক্ষেত্রে প্রচুর সমর্থন করা উচিত।
ড্যান ফিল্ড 18

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) প্রতিস্থাপন করুন


9

আপনি নীচের পদক্ষেপগুলি অনুসরণ করতে পারেন
- দর্শন http://fluttericon.com
- আপনার করা SVG আইকন আপলোড
- ডাউনলোড বাটনে ক্লিক
- আপনি দুটি ফাইলের পাবেন
1. iconname.dart
2. iconname.ttf ফন্ট ফাইল
- ঝাপটানি এই ফাইলটি ব্যবহার & আমদানি করুন আইকন নাম.ডার্ট


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 দেখুন


2

আপনি এই লাইব্রেরিটি এসভিজি চিত্রগুলি উপস্থাপনের জন্য ব্যবহার করতে পারেন - https://pub.dev/packages/flutter_svg

উদাহরণ -

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.