نوشته های مهدیار ارباب زی

نحوه استفاده از فلاتر جن (Flutter_gen) پکیج در ویندوز

مهدیار ارباب زی — Sat, 17 Jun 2023 17:03:13 +0330

یکی از بهترین پکیج هایی که میتونید در پروژه های فلاتری خودتون ازش استفاده کنید و سرعت کار خودتون رو خیلی بالا ببرید همین فلاتر جن هستش. حالا چیکار میکنه مثلا...؟از فلاتر جن برای مدیریت assets های وارد شده به نرم افزارمون استفاده میکنیم. حالا ممکنه براتون سوال پیش بیاد که چرا اصن نیاز به مدیریتشون داریم؟Flutter Genقطعا برای همه این مشکل پیش اومده که میخوان از عکسی که وارد پوشه assets خودشون کردن استفاده کنن. خب باید آدرس اون عکس رو داخل ویجت مورد نظر بصورت استرینگ وارد کنن. خیلی وقتا اشتباه تایپی پیش میاد ویا حتی یادمون نیست که مسیر اون عکس توی کدوم فولدر بود.اینجاس که فلاتر جن وارد میشود...نحوه راه اندازی فلاتر جن: ترمینال ویندوز خودتون رو باز میکنید و عبارت زیر رو اونجا وارد میکنید و منتظر اتمام فرآیند میشین: dart pub global activate flutter_genحالا جوابی که دریافت کردی رو لازم داریم... Building package executables... (19.3s) Built flutter_gen:flutter_gen_command. Installed executable fluttergen. Warning: Pub installs executables into C:\Users\[user_name]\AppData\Local\Pub\Cache\bin, which is not on your path. You can fix that by adding that directory to your system's "Path" environment variable. A web search for "configure windows path" will show you how. Activated flutter_gen 5.3.1.اینجا دقت کنید که به شما داره میگه فلاتر جن نصب شد و برای استفاده از اون باید آدرس فایلش رو در Path سیستم خودتون وارد کنید.در این مرحله باید آدرسی که به ما داده شده رو (C:\Users\[user_name]\AppData\Local\Pub\Cache\bin) به environment variables سیستم خودمون بدیم تا بتونیم از طریق ترمینال بهش دسترسی داشته باشیم.نحوه ورود path به environment variables:داخل منو استارت عبارت environment variables رو سرچ کنید و گزینه Edit the system Environment Variables رو انتخاب کنید.حالا داخل تب Advanced گزینه Environment Variables رو انتخاب کنید.در کادر مربوط به User variables for [user_name] روی Path دابل کلیک کنید و روی گزینه New کلیک کنید، آدرسی که قرار بود به اینجا اضافه کنید رو paste کنید و همه رو OK بزنید و بیاید بیرون.الان وقت این رسیده که پکیج های مورد نیاز رو به فایل pubspec.yaml پروژه خودمون اضافه کنیم:dev_dependencies: build_runner flutter_gen_runnerدقت کنید که باید پکیج های مورد نظر رو در زیر مجموعه dev_dependencies وارد کنید.در آخر باید دستور زیر رو داخل ترمینال دایرکتوری پروژه خودتون اجرا کنید:flutter packages pub run build_runner buildحالا میتونید با مراجعه به فولدر lib/gen فایل های ساخته شده assets پروژه رو ببینید و ازش استفاده کنید.

معرفی پکیج Device Preview

مهدیار ارباب زی — Sat, 02 Jul 2022 22:02:16 +0430

زمانی که یک پروژه رو طراحی و پیاده سازی میکنم همیشه ذهنم درگیر یک موضوع خیلی مهم میشه! به این فکر میکنم که دارم این همه زحمت میکشم، نکنه با device دیگه ای، اون چیزی که اینجا طراحی شده رو به این شکل نشون نده!اینجاست که پکیج Device Preview به کمک شما میاد. در ادامه روش پیاده سازی این پکیج رو یاد میگیریم و اینکه چطور ازش استفاده کنیم.اول از همه به سایت مرجع پکیج های فلاتر مراجعه میکنیم و Device Preview رو سرچ میکنیم. طبق راهنمای installing عبارت زیر رو داخل فایل pubspec.yaml کپی میکنیم.device_preview: ^1.1.0حالا با Import کردن این پکیج باید بریم سراغ تنظیماتش...import 'package:device_preview/device_preview.dart';تمامی تنظیمات داخل صفحه main.dart ما انجام میشه. با استفاده از ویجت DevicePreview به شکل زیرvoid main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return DevicePreview( enabled: !kReleaseMode, builder: (context) => MaterialApp( useInheritedMediaQuery: true, locale: DevicePreview.locale(context), builder: DevicePreview.appBuilder, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ), ); }پیشنهاد من در اینجا به شما اینه که به جای اجرا با emulator از web استفاده کنید تا از رابط کاربری این پکیج بتونید بهتر استفاده کنید.Device Previewبه همین راحتی شما می تونید ریسپانسیو بودن ui خودتون رو داخل انواع مختلف پلتفورم ها و انواع مدل های تلفن همراه امتحان کنید.

رفع خطای نصب SDK اندروید استدیو «SDK emulator directory is missing»

مهدیار ارباب زی — Sat, 04 Jun 2022 05:12:42 +0430

یکی از مشکلات اساسی کاربران ایرانی برای نصب و راه اندازی اندروید استدیو نصب SDK هستش که به دلیل تحریم ها باید مشکلات زیاد و مختلفی رو پشت سر بذاریم. بطوری که بعضی از کاربران تازه وارد به این حوزه ممکن شروع نکرده کلا بیخیال قضیه بشن!حالا موضوعی که اینجا من میخوام مطرح کنم این هستش که، زمانی که ما با خطای نصب SDK مواجه میشیم، اول چه کارهایی رو باید انجام بدیم و بعد بریم سراغ جستجو در سایت های پرسش پاسخ مثل StackOverFlow و غیره ...متن کامل خطا:Nothing to do!Android SDK is up to date.SDK emulator directory is missingاول از همه وارد کنترل پنل ویندوز خودتون بشید و تنظیمات مربوط به Region رو انتخاب کنید.مطابق تصویر چک کنید فرمت سیستم شما روی چه زبانی هستش. حالا شاید سوال براتون پیش بیاد که چرا باید اینکار رو انجام بدید؟!چون اگر فرمت سیستم شما رو زبان فارسی تنظیم شده باشه متاسفانه خطای نصب SDK خودتون رو نمی‌تونید برطرف کنید. Format" />Control Panel -> Region -> Format" /> Region -> Format" />Control Panel -> Region -> Formatخب، اگر فرمت سیستم شما روی زبان فارسی تنظیم شده بود باید به زبان انگلیسی تغییر بدید و دکمه اپلای رو بزنید.حالا به تب Administrative برید و روی Copy settings کلیک کنید و چک باکس های موجود رو تیک بزنید. همچنین روی Change system locale هم کلیک کنید و در پنجره باز شده برای Current system locale گزینه English رو انتخاب کنید. در نهایت سیستم خودتون رو ریست کنید و منتظر بشید تا سیستم شما با فرمت انگلیسی بالا بیاد.در این مرحله با اتصال به VPN معتبر و خوب می‌تونید خطای نصب SDK خودتون رو برطرف کنید و به طور کامل مراحل رو طی کنید.امیدوارم برای دوستانی که با این مشکل روبرو شدن این ترفند کارساز باشه و بتونن پرقدرت به مسیری که شروع کردن ادامه بدن.

نحوه کار با مپ باکس و فلاتر مپ (ویرایش 12 آبان 1402)

مهدیار ارباب زی — Sat, 28 Aug 2021 01:35:17 +0430

یکی از بهترین جایگزین های Google Map استفاده از نقشه های Mapbox هستش. چالش های جدید Google Map تحریم ایران و همچنین دریافت هزینه از ابتدای کار شما با این سرویس هست که برای ما کار رو سخت تر میکنه.با سرویس های Mapbox تا مدتی مشخصی میشه استفاده رایگان داشت. پس برای شروع کار میتونه گزینه مناسبی باشه. من بصورت مرحله به مرحله به شما یاد میدم که چطور میشه با استفاده از ویجت FlutterMap و نقشه های Mapbox بصورت همزمان کار کرد.اما قبل از شروع به شما لینک یوتوبی رو میخوام معرفی کنم که توسط تیم فلاتر فارسی برنامه ریزی و تهیه شده که خیلی دید خوبی نسبت به کار با مپ به همه میده و توصیه میکنم اگر الان فرصت نکردین و این ویدیو رو چک نکردین، حتما در لیست کارهای خودتون بذاریدش و حتما کامل ببینیدش.قدم اول نصب پکیج flutter_map داخل فایل pubspec.yaml هستش که اگر نسخه 0.13.1 این پکیج رو نصب کنید نیاز هتش که به آدرس فایل manifest مراجعه کنید و اجازه استفاده مربوطه رو داخلش اضافه کنید.manifest file direction: /android/app/src/main/AndroidManiFest.xmlحالا شما میتونید از ویجت FlutterMap استفاده کنید اما قبل از این کار باید داخل سایت Mapbox بشید و ثبت نام خودتون رو انجام بدید. توجه داشته باشید که موقع ثبت نام از شما مشخصات پرداخت آنلاین رو میخواد که باید توسط سایت های fake credit card generator از این مرحله عبور کنید. در مورد اطلاعات آدرس و... هم میتونید از این تکنیک استفاده کنید.در صفحه اول پنل کاربری به شما یک توکن با نام "Default public token" اختصاص داده میشه که نیاز هست اون رو کپی کنید.داخل صفحه پنل کاربری به شما امکانات و اطلاعات مورد نیاز داده میشه. بر روی “Design in Mapbox Studio” از قسمت “Tools & resources” کلیک کنید و در صفحه جدیدی که برای شما باز میشه روی “New style” کلیک کنید.انتخاب Design in Mapbox Studioابزار لازم برای طراحی نقشه دلخواه شما اینجا در اختیار شما قرار داره که من مراحل ایجاد نقشه ساده رو در قالب یک عکس نمایش میدم.انتخاب نقشه سادهبعد از ایجاد نقشه مورد نظر روی آیکون “Share your style” کلیک کنید و در صفحه باز شده تب “Third party” رو انتخاب کنید. سپس گزینه “CARTO” رو انتخاب کنید و “Integration URL” رو برای خودتون کپی کنید.انتخاب گزینه "Share your style"مراحل گزینش "Integration URL"در مرحله آخر باید به صفحه “Tilesets” مراجعه کنید و آی دی تایلست مورد نظر خودتون رو کپی کنید.مراجعه به صفحه تایلستکپی آی دی تایلست مورد نظرحالا وقت استفاده از ویجت FlutterMap هستش...FlutterMap( options: MapOptions( center: LatLng(51.5, -0.09), zoom: 13.0, ), layers: [ TileLayerOptions( urlTemplate: ‘use Integration URL here’, additionalOptions: { ‘accessToken’: ‘use Default public token here’, ‘id’: ‘use the ID of Tilesets here’, }, ), ], ),