আমি আমার ফ্লটার অ্যাপ্লিকেশনটিতে একটি এসভিজি উত্স সহ একটি চিত্র যুক্ত করার চেষ্টা করেছি।
new AssetImage("assets/images/candle.svg"))
তবে আমি কোনও ভিজ্যুয়াল প্রতিক্রিয়া পাইনি। আমি কীভাবে বিড়বিড় করে কোনও এসভিজি ছবি রেন্ডার করতে পারি?
আমি আমার ফ্লটার অ্যাপ্লিকেশনটিতে একটি এসভিজি উত্স সহ একটি চিত্র যুক্ত করার চেষ্টা করেছি।
new AssetImage("assets/images/candle.svg"))
তবে আমি কোনও ভিজ্যুয়াল প্রতিক্রিয়া পাইনি। আমি কীভাবে বিড়বিড় করে কোনও এসভিজি ছবি রেন্ডার করতে পারি?
উত্তর:
ফ্লাটার বর্তমানে এসভিজি সমর্থন করে না। আপডেটের জন্য 1831 ইস্যুটি অনুসরণ করুন ।
আপনার যদি ভেক্টর অঙ্কনের প্রয়োজন হয় তবে আপনি কীভাবে এপিআই ব্যবহার করে আঁকবেন, বা নিজের চিত্রটি স্থানীয় দিকের দিকে ছড়িয়ে দিতে এবং বিটম্যাপ হিসাবে এলোমেলোভাবে পাস করতে পারেন তার উদাহরণ হিসাবে আপনি ফ্লটার লোগো উইজেট দেখতে পারেন Canvas
, তবে আপাতত আপনার সেরা বেটটি সম্ভবত এম্বেড করুন উচ্চ-রেজোলিউশন রাস্টারযুক্ত সম্পদ চিত্রগুলি।
হরফ অনেক ক্ষেত্রে ক্ষেত্রে দুর্দান্ত বিকল্প।
আমি একটি ক্যানভাসে এসভিজি রেন্ডার করার জন্য একটি লাইব্রেরিতে কাজ করছি যা এখানে পাওয়া যায়: 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
Canvas
পদ্ধতিতে ডার্টে লেখা ।
ফ্লিটার সম্প্রদায়ের বিকাশকারীরা এসভিজি ফাইলগুলি হ্যান্ডেল করার জন্য একটি লিব তৈরি করেছিলেন। আমরা এটি হিসাবে ব্যবহার করতে পারেন
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
- আপনার করা SVG আইকন আপলোড
- ডাউনলোড বাটনে ক্লিক
- আপনি দুটি ফাইলের পাবেন
1. iconname.dart
2. iconname.ttf ফন্ট ফাইল
- ঝাপটানি এই ফাইলটি ব্যবহার & আমদানি করুন আইকন নাম.ডার্ট
আপনি অ্যানিমেশন তৈরি করতে শিখা ব্যবহার করতে পারেন এবং কেবল সম্পদ হিসাবে .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 দেখুন
আপনি এই লাইব্রেরিটি এসভিজি চিত্রগুলি উপস্থাপনের জন্য ব্যবহার করতে পারেন - 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 যারা ডার্ট করতে Chrome এর SVG রেন্ডারিং যুক্তিবিজ্ঞান বৈশিষ্ট্যসমূহ নিয়ে আসা