پست‌های انتشارات Monobit Publication

اجرای متد بعد از ساخت کامل ویجت در فلاتر

مهدی باقری — Thu, 26 Mar 2020 00:48:26 +0430

تا حالا شده دلتون بخواد دقیقاً بعد از اینکه متد build توی یک statefulWidget صدا زده شد، یک snackbar نشون بدین یا مثلا یه دیالوگ به محض نمایش اولین لایه از یک ویجت نشون بدین؟وقتی خواستم یه اسنکبار (SnackBar) ساده رو توی initState درست کنم یه جورایی nullPointerException گرفتم :Dclass HomeScreen extends StatefulWidget { @override HomeScreenState createState() => new HomeScreenState(); } class HomeScreenState extends State { GlobalKey _key = new GlobalKey(); @override void initState() { super.initState(); // NOTE: Calling this function here would crash the app. showHelloWorld(); } @override Widget build(BuildContext context) { return new Scaffold(key: _key, body: Container(color: Colors.red)); } void showHelloWorld() { _key.currentState.showSnackBar(SnackBar( content: Text("HelloWorld"), )); } }اروری که میگیرفتم این بود که یعنی هنوز ویجت رو نساختم و تو میخوای به اون ویجت دسترسی پیدا کنی و یه متد از currentState اون ویجت صدا بزنی؟و اما واسه اینکه از این حدسم مطمئن بشم (چرا واقعا؟ نمیدونم) رفتم و داخل initState بجای اینکه showHelloWorld رو یهویی صدا بزنم با یه تاخیر کمی مثلا 5 ثانیه صداش میزنم که مطمئن باشم ویجتم ساخته شده ولی خب مسلماً این روش جالبی نیست :)// Add this after super.initState(); Future.delayed(Duration(seconds: 5)).then((v) => showHelloWorld());به قول بهتاش "من دیگه رد دادم" و رفتم سراغ دکتر گوگل عزیز و نتایج جالب بود :بعد از super.initState بیایم و از WidgetsBinding به شکل زیر استفاده کنیم.توی داکیومنت فلاتر از WidgetsBinding به عنوان چسب بین لایه ویجت ها و موتور فلاتر نام برده شده. (The glue between the widgets layer and the Flutter engine)و یا همین تیکه کد رو در قالب یه mixin به ویجت stateful خودتون اضافه کنید.// Add this after super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) => showHelloWorld(context));از متد addPostFrameCallback برای اضافه کردن یک FrameCallback به انتهای فریم درحال اجرا استفاده میشه به این معنی که به محض اینکه فریم مربوط به رندر اولین لایه از این ویجت تموم بشه متد مورد نظر شما قابل اجراست و میتونه به المنت های رندر شده دسترسی داشته باشه (تکنیکالی).OR// Use this Mixin with your StatefulWidget mixin WidgetLoadMixin on State { @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) => (context)); } void (BuildContext context); }حالا کافیه متد رو override کنید و به راحتی هر کاری که میخواین بعد از لود شدن کامل ویجت انجام بشه توش بنویسید.*** یه dependency هم هست که همین کار (mixin بالا) رو براتون انجام میده به اسم after layout که میتونید ازش استفاده کنید اما کدهای بالا کارتون رو راه میندازه.امیدوارم از خوندن این مطلب لذت برده باشید.مهدی باقری

فلاتر دسکتاپ (Flutter Desktop)

مهدی باقری — Sun, 15 Mar 2020 03:58:18 +0330

جدیداً خیلی دارن ویندوزی ها رو اذیت میکننا! یعنی چی آخه توی مک و لینوکس کامند flutter create پوشه ها و کانفیگ مربوط به ویندوز و وب رو ایجاد میکنه و بی دردسر میتونین دولوپ کنین ولی واسه توسعه یک برنامه دسکتاپ توی ویندوز باید این همه سختی و مشقت رو تحمل کرد! البته الان که کانفیگش رو تموم کردم و آماده استفادست بهش که نگاه میکنم زیادم پیچیده نیست فقط باید تا موقعی که یه فکری به حالش بکنن با این سیستم روی دسکتاپ تو حالت دیباگ خروجی برنامه هامون رو ببینیم.مرحله 0.اول از همه تا یادمون نرفته توی ترمینال branch مربوط به flutter sdk از رو هرچی که هست (stable , ...) بردارید و بذارید روی master چون فقط روی این شاخه میتونیم اینکارو بکنیم! برای اینکار از دستور زیر استفاده کنید :flutter channel برای مشاهده ی کانال هاflutter channel master برای سوییچ کردن به کانال مسترمن طبق عادت همه کارام رو توی Android Studio انجام میدم و این دستور ها رو هم توی ترمینال اون مینویسم بعد از اینکار دستور flutter doctor رو اجرا کنید که با یک صحنه ای مثل صحنه زیر مواجه میشین!خروجی دستور flutter doctorمرحله 1.همونطور که می بینید میگه که ویژوال استودیو (develop for windows) رو میخوام حتما هم 2019 باشه یا بالاتر که خب مال من 2017 بوده ولی حرف حرف خودشه. بعد گفته که از کجا میتونیم دانلود کنیم که لینکش رو میذارم فقط پیشنهادم اینه نسخه Community رو دانلود کنید. https://visualstudio.microsoft.com/downloads/ بعد از اینکه زحمت دانلود installer رو کشیدین میرسیم به قسمت شیرین نصب که اصلا کاری نداره فقط از بین گزینه های مربوط به Desktop development with C++ باید اونایی که توی تصویر بالا اومده انتخاب کنید که شامل MSBuild (که فکر کنم خودکار تیک زده شده باشه) و MSVC و Windows 10 SDK (آخرین نسخه رو دانلود کنید) میشه.کافیه یبار دیگه flutter doctor رو بگیرین تا مطمئن بشین همه چی رو به راهه؛ اگه درست اون چیزایی که باید رو نصب کرده باشین ???مرحله 2.نصب که تموم شد از گیتهاب پروژه ی flutter-desktop-embedding رو کلون کنید و از داخل پوشه example پوشه windows رو کامل کپی کنید و در پروژه خودتون کنار پوشه libs جاگذاری کنید.مرحله 3.داخل ترمینال دستور زیر رو بنویسیدflutter config —enable-windows-desktopبرای اینکه تاثیرش رو بذاره باید تمام ide هایی که باهاشون فلاتر کار میکنید ببندید و دوباره باز کنید.قبل از اینکه بریم سراغ مرحله آخر و اجرای برنامه ترجیحا یبار اول flutter clean و بعد flutter packages get بکنید و بعدش هم flutter packages upgrade بکنید :)مرحله آخر.توی ide که ازش استفاده میکنید چه VSCode چه Android Studio چه Intellij میتونید علاوه بر دستگاه اندرویدی که متصل هست یه دیوایس دیگه به عنوان (Windows(desktop ببینید و روی اون دستگاه اجرا بگیرید یا از دستور زیر تو خط فرمان استفاده کنید.flutter run -d windowsزیباست نه؟! عیناً همون برنامه که توی موبایلتون میتونه اجرا بشه حالا به راحتی میتونه توی ویندوز هم اجرا بشه بدون حتی یک خط کد اضافه!!! ??.نمونه پروژه فلاتر (خروجی دسکتاپ)داشت یادم میرفت یه خط باید اضافه کنید به برنامتون هروقت میخواین خروجی ویندوز دسکتاپ بگیرین!داخل main.dart تابع main قبل از فراخوانی runApp مقدار debugDefaultTargetPlatformOverride رو برابر با TargetPlatform.fuchsia قرار میدیم.debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia; // for desktop embedderنکته خیلی مهم : با هر آپدیت و تغییری توی فلاتر و flutter-desktop-embedding لازمه پوشه windows رو کاملا پاک کنید و از پوشه موجود در پوشه example دایرکتوری مذکور استفاده کنید.

Dart Extension (افزونه های دارت)

مهدی باقری — Mon, 02 Mar 2020 22:53:47 +0330

Dart Languageاخیراً به شدت به زبون شیرین دارت (Dart) علاقمند شایدم معتاد شدم. مخصوصاً که از نسخه 2.7 میشه توش extension نوشت، و خب شاید بهتره بگم بعد از تجربه ی طولانی مدتی که با جاوا داشتم الان چیزی مثل extension باعث میشه به وجد بیام و یه جورایی توی نوشتن extension method ها دارم زیاده روی میکنم شاید :)حین کار با فلاتر به ویجتی برخوردم به اسم Visibility! واسه اونایی که نمیدونن بگم که به کمک این ویجت میتونید یه ویجت child رو توی صفحه نامرئی کنید؛ مثل کاری که توی اندروید با ویژگی visibility به View ها میتونستیم اونا رو تو سه حالت View.VISIBLE، View.GONEو View.INVISIBLE داشته باشیم.حقیقتش من از اینکه ویجتم رو بندازم داخل یه ویجت دیگه به اسم Visibility اصلا حس خوبی نداشتم به همین خاطر یه افزونه خیلی ساده نوشتم روی همه ویجت های پروژم که این کار رو برام ساده تر و شیک تر میکنه (البته که کاملا سلیقه ایه!).extension Visibility on Widget { Widget visible(bool visibility) { return visibility ? this : SizedBox.shrink(); } }حالا هر ویجت دلخواهی بدون نیاز به wrap شدن توی ویجت Visibility میتونه خاصیت مرئی یا نامرئی شدن رو به شکل زیر داشته باشه :widget.visible(TRUE/FALSE);بجای :Visibility ( visible: FALSE/TRUE, child: widget, )یکی دیگه از مواردی که لازم شد برای کلاس String یک افزونه بنویسم این بود که توی فلاتر متدی نداریم که کد hex بصورت رشته رو تبدیل بکنه به یک شیء از نوع Color بخاطر همین متدش رو در قالب یک extension method نوشتم :extension StringUtil on String { Color toColor() { return new Color(int.parse(this.substring(1, 7), radix: 16) + 0xFF000000); } }خلاصه که پیشنهاد میکنم تا جایی که میشه ازشون استفاده کنید :) خیلی کاربردی و خیلی جذابن!توی مقاله بعدی کامل توضیح میدم که چجوری میتونید با این قابلیت باحال و خفن کار کنید و extension های مورد نیاز خودتون رو بسازید و ازش لذت ببرید.