نوشته های Mahmoud Eslami

Null safety in dart | قسمت #2

Mahmoud Eslami — Wed, 03 Feb 2021 10:35:31 +0330

null safety in dartقسمت قبل : https://vrgl.ir/5j891 سلام بدون اتلاف وقت میریم برای ادامه ماجرا ...در ادامه قسمت قبل از null safety امروز میریم سراغ مدیریت مقادیر نال در list , map , ... ها .بررسی List , Map , Set در زبان دارت از list و map و set ها معمولا برای نگه داری داده های مجموعه ای استفاده میشه در این قسمت میخوایم قابلیت null safety رو بهشون اضافه کنیم .اول میریم سراغ list ها و set ها فرض کنید شما یک list تعریف کردید حالا به نظرتون چه چیز های میتونه اینجا null باشه ؟ درسته در حالت اول امکان داره خود لیستمون null باشه و در حالت دوم لیستمون شامل ایتم های null باشه ما برای کنترل این حالت ها از ( ? ) question mark کمک میگیریم . عکس زیر کامل روش کنترل مقادیر null توی لیست رو نشون میده :null safety in listعکس بالا داره حالت های مختلف رو بررسی میکنه .برای مثال چطوری null بودن خود لیست رو کنترل کنیم ? ؟ کافیه در زمان تعریف متغیرمون که یک لیست هست بعد از type اون متغیر یک question mark بگذاریمبه شکل زیر :list? myFriends : این مثال لیست میتونه null باشهlist myFriends : این مثال لیست نمیتونه null باشهحالت بعدی اینه که چطوری null بودن ایتم های درون لیست رو کنترل کنیم . چطوری ? ؟زمانی که داریم یک لیست تعریف میکنیم باید برای اون لیست یه data type مشخص کنیم که مشخص میکنه عضو های اون لیست از اون جنس هستند کافیه در زمان تعریفش بعد از اون data type یک علامت question mark بگذاریم به شکل زیر :list myFriends : این مثال عضو های لیست میتونه یک متغیر null باشهlist myFriends : این مثال عضو های لیست نمیتونه یک متغیر null باشهخب این از لیست کارش تمومه فقط همونطور که تو عکس بالا میبینید شما میتونید از هر دو همزمان استفاده کنید .نکته : زمانی که میخوایم یک متغیر تعریف کنیم و میخوایم از type annotation به جای type دادن به صورت بالا استفاده کنیم بازم میتونیم از question mark استفاده کنیم . کد زیر :type annotationبررسی Map در map ها یک استثنا وجود داره اونم اینه که زمانی ما مقدار یک کلیدی که توی لیست وجود نداره رو درخواست میکنیم خب مشخصه مقدار null برمیگرده ??‍♂️ .مثال زیر رو ببینید و مقدار و نوع متغیر uhOh رو حدس بزنید :uhOhجواب : مقدارش برابر با null و type متغیر هم برابر با ?int هست .عکس زیر به بررسی map ها پرداخته :map null safetyتوی map ها هم مشابه با لیست ها هم میتونه خود مپ null باشه هم مقدار کلید هاش . نکته ( * ) : داستان اون ستاره توی عکس از این قراره که زمانی که مقدار همه ی کلید های توی map یک مقدار غیر null باشه زمانی که شما مقدار یک کلیدی که وجود نداره رو درخواست میکنید به شما مقدار null بر میگردونه .به همین دلیل چون map ها در زمان درخواست کلید اشتباه مقدار null بر میگردونن نمیتونیم از متغیر های non nullable برای نگه داری اون ها استفاده کنیم . کد زیر : mapنکته : اگر حتما مطمعن هستید که در map کلیدی که وجود نداره رو جست و جو نمیکنید میتونید از ! هم استفاده کنید . کد زیر :!یک کار راه حل دیگه هم وجود داره که ما در زمان جست و جو در map میتونیم از ?? operator استفاده کنیم و مثلا اگر مقدار null بود یه مقدار دلخواه برگردونیم مثلا اگر value هامون از نوع int بود میتونیم مقدار 0 رو برگردونیم . کد زیر :؟؟خب اینم از map ها ? .تا اینجا این مطالب چیزایی بود که از null safety متوجه شدم اگر چیز جدیدی یاد گرفتم حتما اضافه میکنم .منابعی که من در مورد null safety خوندم : https://dart.dev/null-safety https://github.com/dart-lang/samples/tree/master/null_safety/calculate_lix همین الان که داشتم منابع رو اضافه میکردم چشمم به یک داکیومنت جدید خورد که چجوری به کد های قبلیمون null safety رو اضافه کنیم ... پس احتمالا اون میشه قسمت بعدی و هنوز داستان ادامه داره ??.نکته مهم : اگر جایی از مقاله مشکل نگارشی یا علمی داشت ممنون میشم کامنت کنید ☹️.اگه براتون مفید بود لایک یادتون نره حتما نظراتتون رو کامنت کنید ?. اگر هم منو فالو ندارید خوشهال میشم فالو کنید از این به بعد قراره مباحثی که در مورد فلاتر و دارت رو مطالعه میکنم توی ویرگول براتون منتشر کنم .

Null safety in dart | مدیریت مقادیر نال در دارت

Mahmoud Eslami — Sat, 30 Jan 2021 14:32:13 +0330

dart null safetyسلام ممنون که انگشت مبارک رو روی این مقاله فشردی .امروز میخوایم در مورد کنترل مقادیر null در دارت صحبت کنیم شاید این مقاله توی چند قسمت کامل بشه بازم بستگی به حجمش داره ? .خب اول از همه یه نکته رو بگم که این قابلیت روی بتا هست (دلیل نمیشه ما در موردش ندونیم ? ) و هنوز وارد stable نشده ولی قراره به زودی وارد زبان دارت بشه.حالا بریم سر اصل مطلب ... وقتی شما از null safety استفاده میکنید تموم type هاتون به صورت پیشفرض non-nullable میشه یعنی تا وقتی خودتون به دارت گوشزد نکنید کلیه مقادیرتون نمیتونه null باشه . (پایین تر با ذکر مثال های متعدد این قسمت رو بیشتر توضیح میدم )زمانی که ما از null safety استفاده میکنیم ارور های مربوط به مقادیر null از runtime به edit-time منتقل میشه یعنی در حالت اول و بدون استفاده از null safety شما باید برنامه رو اجرا کنید تا ارور های مربوط به مقادیر null رو دریافت کنید ولی با استفاده از این قابلیت همون لحظه که یک متغیر تعریف میکنید اگر مشخص نکنید که میتونه null باشه همونجا dart analysis با یه ارور زیبا ازتون پذیرایی میکنه .شاید شکل زیر بتونه تو فهم پاراگراف بالا کمک کنه .runtime erroredit time errorنکته : برای تست کردن null safety نیازی نیست حتما برید روی چنل بتا به راحتی میتونید از دارت پد با قابلیت null safety استفاده کنید (همونجا کلی مثال هست که اگر اونا رو هم بخونید مطلب کاملا جا میفته براتون) که لینکشو این پایین براتون قرار میدم . https://nullsafety.dartpad.dev/ اصول null safety :این اصول را به ۳ بخش نهاده اند :۱ - به صورت پیش فرض non-nullable : در حالت کلی تا زمانی که به دارت نگیم فلان متغیر من میتونه null باشه دارت به صورت پیش فرض همرو non nullable در نظر میگیره یعنی متغیر هامون نمیتونن null باشن .۲ - incrementally adoptable : ما میتونیم توی هر قسمت از پرژمون از null safety استفاده کنیم پس میتونیم یک کد ترکیبی داشته باشید و میتونیم به هر بخش از پروژمون رو در صورت نیاز قابلیت null safety اضافه کنیم نگران هم نباشید دارت قراره یکسری ابزار برای migration کردن کد های قبلیمون ارائه بده .۳ - fully sound : وقتی این قابلیت رو به صورت کامل استفاده میکنید کامپایلرمون به صورت کامل بهینه سازی میشه پس هیچ مقادیری در کدتون نمیتونه null باشه و خوبی های این قابلیت به این خلاصه نمیشه با null safety شما باگ کمتری دارید و سرعت اجرای بیشتری دارید حالا بریم یه تور از قابلیت های null safety داشته باشیم :کلمات کلیدی قابل استفاده در null safety : ؟ _ ! _ late (فکر کنم این کلید واژه توی کاتلین هم باشه)اگر زبان های kotlin , TypeScript و ... کار کرده باشید تا حدودی با null safety اشنا هستید .ساخت متغیر در زمان ساخت متغیر برای اینکه قابلیت null بودن رو به متغیر اضافه کنیم میتونیم از ? یا late استفاده کنیم مثال برای متغیر های non nullable :مثال برای متغیر های nullable :اگر مطمعن هستید یک متغیر قبل از استفاده حتما مقدار دهی میشه ولی دارت بهتون اجازه نمیده که اون رو بدون مقدار دهی اولیه تعریف کنید میتونید از late استفاده کنید . مثال زیر دو تا از اثر های کلید واژه late :۱ - زمانی که از late استفاده میکنید اجباری وجود نداره که متغیر رو فورا مقداردهی کنید .۲ - اگر یک متغیر غیر نال نیاز به محاسبه داشته باشه زمانی که از late استفاده میکنید یک تاخیر برای محاسبه متغیر تا قبل از اولین استفاده اعمال میشه .استفاده از متغیر ها و اصطلاحات :زمانی که دارت یک متغیر nullable پیدا کنه که نباید نال باشه یک ارور generate میکنه و زمانی که از یک متغیر با قابلیت نال بودن استفاده میکنیم باید توجه کنیم که مقادیر null رو هندل کنیم برای مثال میتونید از اصطلاحات if , ?? , ?. استفاده کنید مثال های زیر رو یه نگاه بندازید .نکته : dart analyzer نمیتونه وضعیت null safety متغیر های گلوبال رو پیش بینی کنه .مثال ؟؟ :مثال if :مثال ! :نکته : اگر مطمعن نیستید که مقدار متغیر نال نیست به هیچ وجه از ! استفاده نکنید .نکته : اگر نیاز دارید که type یک متغیر nullable رو تغییر بدید میتونید از as به عنوان typecast operator استفاده کنید مثال :نکته : در زمان استفاده از null safety ما نمیتونیم از . (member access operator) استفاده کنیم در عوض میتونیم از (.?) استفاده کنیم مثال :این operator در اصل منظورش اینه که اگر مقدار d نال نبود متد floor رو روش فراخوانی کن ...خب حس میکنم تا اینجا کافیه ? . البته یه قسمت دیگه در مورد list , map , set و استفاده از null safety در اونها مونده که توی قسمت دوم بهش میپردازیم . https://vrgl.ir/8kbEM نکته مهم : اگر جایی از مقاله مشکل نگارشی یا علمی داشت ممنون میشم کامنت کنید ☹️.اگه براتون مفید بود لایک یادتون نره حتما نظراتتون رو کامنت کنید ?. اگر هم منو فالو ندارید خوشهال میشم فالو کنید از این به بعد قراره مباحثی که در مورد فلاتر و دارت رو مطالعه میکنم توی ویرگول براتون منتشر کنم .

Hero animation | انیمیشن هیرو در فلاتر

Mahmoud Eslami — Thu, 27 Feb 2020 12:59:30 +0330

چند وقتی میشه با فلاتر آشنا شدم.واسه همین تصمیم گرفتم یه پروژه با فلاتر درست کنم و تصمیم دارم پروژمو این جا با شما به اشتراک بزارم. تو این مجموعه از پست‌ها چند تا از مهم‌ترین موضوعات فلاتر رو باهم بررسی می‌کنیم و در نهایت یک پروژه کامل رو به پایان می‌رسونیم. این پست ششمین پست از این سری هستش و در اون به Hero Animation می‌پردازیم. برای دیدن قسمت قبل می‌تونید به این لینک مراجعه کنید.مطالبی که تو این مجموعه یاد می‌گیریم به چند قسمت تقسیم میشن:مقدمه.طراحی UI اولیه اپلیکیشن.ساخت مدل‌ها و کدهای مربوط به تبدیل اون به Json (از کتابخونه معروف json_serializable استفاده می‌کنیم).ارتباط با سرور (از کتابخونه Dio تو این قسمت استفاده شده).استفاده از کتابخانه cached_network_image برای گرفتن عکس از اینترنت و cache کردن اون.استفاده از انیمیشن در فلاتر.ساخت launcher icon دلخواه برای android و ios در فلاتر.مطالبی که توی این آموزش یاد میگیرید ...انیمیشن هیرو چیست ؟چجوری یه هیرو انیمیشن بسازیم ؟چگونه هیرو را customize کنیم ؟انیمیشن هیرو چیست ؟انیمیشن هیرو جزو ساده ترین انیمیشن ها در فلاتر است در واقع انیمیشن هیرو عنصری از صفحه است که در زمان رفتن به صفحه دیگر به پرواز در می آید و زمانی که کاربر به صفحه قبل بر میگردد انیمیشن در جهت مخالف نمایش داده میشود . در gif زیر میتونید روش کارشو ببینید .!!چجوری یه هیرو انیمیشن بسازیم ؟این کار خیلی ساده هست کافیه شما اون ویجتی که میخواین انیمیشن روش اعمال بشه رو درون یک Hero قرار بدید ! به قطعه کد زیر دقت کنید.Hero( tag: 'Pic', child: FlutterLogo( size: 400, ), ),هیرو انیمیشن یه پراپرتی به نام tag داره که مثل ایدی هست . در واقع هیرو از روی این تگ ها تشخیص میده که انیمیشن باید بین کدام عناصر در صفحات مختلف انجام بشه پس شما باید برای ویجت های مد نظرتون تگ یکسان انتخاب کنید .چگونه هیرو را customize کنیم ؟یکی از قابلیت هایی که هیرو انیمیشن داره میتونید برای اون یک placeholder قرار بدید . روش کارش هم اینطوریه که در زمان انتقال ویجت مورد نظر تا زمانی که در صفحه مقصد فضای خالی هست شما میتونید یه ویجت دیگه نشون بدید برای مثال یک CircularProgressIndicator . به کد زیر دقت کنید !!Hero( tag: "Pic", child: Icon( Icons.add, size: 150.0, ), placeholderBuilder: (context, widget) { return Container( height: 150.0, width: 150.0, child: CircularProgressIndicator(), ); }, ),منابعhttps://flutter.dev/docs/development/ui/animations/hero-animationsاگه این مطلب براتون مفید بود خوشحال میشم اونو با دوستان و اطرافیانتون به اشتراک بزارید. ممنون?راستی قلب یادتون نره ...❤️

آموزش (Flutter) - کتابخانه cached_network_image

Mahmoud Eslami — Wed, 29 Jan 2020 11:04:22 +0330

چند وقتی میشه با فلاتر آشنا شدم.واسه همین تصمیم گرفتم یه پروژه با فلاتر درست کنم و تصمیم دارم پروژمو این جا با شما به اشتراک بزارم. تو این مجموعه از پست‌ها چند تا از مهم‌ترین موضوعات فلاتر رو باهم بررسی می‌کنیم و در نهایت یک پروژه کامل رو به پایان می‌رسونیم. این پست پنجمین پست از این سری هستش و در اون به کتابخانه cache network image می‌پردازیم. برای دیدن قسمت قبل می‌تونید به این لینک مراجعه کنید.مطالبی که تو این مجموعه یاد می‌گیریم به چند قسمت تقسیم میشن:مقدمه.طراحی UI اولیه اپلیکیشن.ساخت مدل‌ها و کدهای مربوط به تبدیل اون به Json (از کتابخونه معروف json_serializable استفاده می‌کنیم). ارتباط با سرور (از کتابخونه Dio تو این قسمت استفاده شده).استفاده از کتابخانه cached_network_image برای گرفتن عکس از اینترنت و cache کردن اون.استفاده از انیمیشن در فلاتر.ساخت launcher icon دلخواه برای android و ios در فلاتر.تصور اینکه اپلیکیشن های امروزی بدون دسترسی به اینترنت کار کنند کار سختیه!. اپلیکیشن ها معمولا شامل اطلاعاتی از قبیل نوشته و عکس ها و فیلم ها و ... هستند.برخی از این اطلاعات به علت حجم بالایی که دارند برای جلوگیری از تجربه کاربری بد یا معطل شدن کاربر هنگام دریافت اطلاعات از سرور باید cache( حافظه نهانی است که اطلاعاتی که بارگذاری میشوند در آن ذخیره میشود) شوند.توی این مقاله میخوایم نحوه cache کردن تصاویر در فلاتر رو بررسی کنیم.کتابخانه Cache_Network_Image :برای استفاده از این کتابخانه اول باید اون رو به پروژتون اضافه کنید پس به فایل pubspec.yaml در پروژه رفته و کتابخونه رو در قسمت dependencies اضافه کنید.dependencies: cached_network_image: ^2.0.0نکته : نسخه ای که الان استفاده شده اخرین نسخه هست ولی احتمال تغییرش هست شما میتونید از لینک زیر اخرین نسخه رو مشاهده کنید. https://pub.dev/packages/cached_network_image/versions درمرحله بعدی شما باید این کتابخانه رو نصب کنید پس دستور زیر رو در ترمینال وارد کنید.$ flutter pub getدر مرحله اخر هم برای استفاده توی کلاس مورد نظر اونو import میکنید.import 'package:cached_network_image/cached_network_image.dart';قطعه کد زیر هم نمونه ای از استفاده از این کتابخانه است :class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Padding( padding: EdgeInsets.all(20.0), child: CachedNetworkImage( imageUrl: url, placeholder: (context, url) => CircularProgressIndicator(), errorWidget: (context, url, error) => Icon(Icons.error), ), ), ), ); } }همونطور که میبینید یکی از attribute های مهم placeholder است که به شما اجازه میده هر ویجتی استفاده کنید تا در زمانی که عکس در حال لود شدن هست ویجت مورد نظر نمایش داده شود برای مثال میتونید یک ()CircularProgressIndicator استفاده کنید.ویژگی ها (attributes) : imageUrl , placeholder , errorWidget , fadeOutDuration , fadeInDuration , alignment , cacheManager , color , repeat , ...با atrribute های موجود شما میتونید با انعطاف بالا ذخیره سازی عکس هاتون رو پیکربندی کنید.منابعhttps://flutter.dev/docs/cookbook/images/cached-imageshttps://pub.dev/packages/cached_network_image#-installing-tab-اگه این مطلب براتون مفید بود خوشحال میشم اونو با دوستان و اطرافیانتون به اشتراک بزارید. ممنون?راستی قلب یادتون نره ...❤️