https://virgool.io/feed/@mamadcodes fa 2026-06-16 10:02:47 https://files.virgool.io/upload/users/2609483/avatar/avatar.png?height=120&width=120 https://virgool.io/@mamadcodes https://virgool.io/@mamadcodes/%DA%A9%D9%84%D9%85%D8%A7%D8%AA-%DA%A9%D9%84%DB%8C%D8%AF%DB%8C-async-%D9%88-await-%DA%86%DB%8C-%D9%87%D8%B3%D8%AA%D9%86%D8%AF-acuiagbzws1m توی فلاتر ما از async و await برای برنامه نویسی ناهمزمان استفاده میکنیم. از async استفاده میکنیم که یک فانکشن رو به عنوان فانکشن ناهمزمان معرفی کنیم. Async به تابعمون این امکان رو میده که بتونه از کلمه کلیدی await استفاده بکنه برای اینکه اجرای خودش رو تا زمانی که عملیات های ناهمزمانی مثل درخواست های شبکه یا ورودی / خروجی فایل ها، متوقف کنه. با این کار تابع میتونه عملیات های دیگه رو انجام بده یا اینکه صبر کنه برای گرفتن نتیجه، بدون اینکه کل روند برنامه رو متوقف کنه.بیاید با یک مثال بهتر درکشون کنیم:توی مثال بالا، اول یک تابع داریم به نام fetchData() که کاری شبیه به درخواست های شبکه رو انجام میده، چیزی هم که برمیگردونه، 'Data from the network' یه رشته یا String هستش(چیز پیچیده ای نیست!).تابع main هم به عنوان یک تابع async تعریف شده که بتونیم از کلمه کلیدی await استفاده کنیم. ما fetchData() رو با استفاده از کلمه کلیدی await، صدا میزنیم، که با این کار انجام عملیات های تابع main رو تا زمانی که درخواستمون رو بصورت کامل از شبکه بگیریم، متوقف میکنه، و زمانی که درخواست بصورت کامل دریافت شد، اون رو در متغیر result ذخیره میکنیم و ازش استفاده میکنیم.طبق چیزی که میبینیم، وقتی که از کلمه await استفاده میکنیم، انجام عملیات تابع main() در اون قسمت متوقف میشه. تا زمانی هم که تابع awaited (که در اینجا fetchData هستش)، کارش تموم نشده و نتیجه رو دریافت نکرده، به مرحله ی بعد نمیره مثلا، توی مثال بالا ('Print ('End اجرا نمیشه و منتظر میمونه که تابع fetchData نتیجه رو دریافت کنه و توی متغیر result ذخیره کنه. اگه درخواست fetchData، تقریبا 2 ثانیه طول بکشه برای کامل شدن، ('Print ('End بعد از 2 ثانیه اجرا میشه.یعنی روند اجرای تابع main اینجوریه:1- اول start رو نشون میده2- (بعد از 2 ثانیه صبر کردن) 'Data from the network' رو نشون میده3-در آخر هم End رو نشون میدهو تابع main به اتمام میرسه.استفاده از await بهتون کمک میکنه که کدی بنویسید که در ظاهر بصورت همزمان در حال اجرا هستش، ولی در واقعیت بصورت ناهمزمان در حال اجرای تسک ها هست. mohammad boustani mohammad boustani Sat, 01 Jul 2023 01:01:43 +0330 https://virgool.io/@mamadcodes/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D8%A8%DB%8C%D9%86-%D9%88%DB%8C%D8%AC%D8%AA-%D9%87%D8%A7%DB%8C-stateless-%D9%88-statefull-gecbfzgubqd0 در فلاتر، ویجت ها بلاک های سازنده رابط کاربری هستند. اونها رفتار ها ، ظاهر و ساختار یک المان رابط کاربری رو تشکیل میدن. دو مدل ویجت توی فلاتر وجود داره:stateful widgets و stateless widgets، تفاوت اصلیشون هم برمیگرده به این که اونا چطوری وضعیتشون رو مدیریت میکنند(???WTF)!!بذارید راحتتر بهتون بگم، توی فلاتر هر چیزی که توی صفحه میبینید رو میگن ویجت، کلا همه چی اینجا ویجت هستش، متن ها، سطر و ستون ها، دکمه ها، اسلایدر ها و خلاصه همه چی اینجا بر اساس ویجت ها پیدا شده، حتی میتونید یه ویجت جدید با ترکیب چندتا ویجت آماده بسازید.همونطوری که بالا گفتم، دو مدل ویجت داریم، ویجت stateless و ویجت stateful، بیاین اول در مورد ویجت stateless حرف بزنیم.ویجت های Stateless ، در واقع immutable هستند، یعنی این که زمانی که ساخته شدن، هیچ خاصیتی از اونا نمیتونه تغییر بکنه، یعنی ظاهر اون ویجت ها ثابت هستش و تغییر نمیکنه، حالا این یعنی چی؟ یعنی اینکه مثلا شما یه ویجت متن رو میسازی که میخوای ازش به عنوان یک لیبیل استفاده کنی، بهش کلی استایل باحال میدی و قشنگش میکنی، وقتی برنامه اجرا میشه، اون ظاهر و اون ویجت فقط چیزی که داخلش نوشته شده رو نمایش میده و چیزی توی اون ویجت تغییر نمیکنه(چه متن چه ظاهر)، صرفا هم براساس اون اون پارامتر ها و مقادیر اولیه ای که بهشون میدیم نشون داده میشن.مثلا این Text یک ویجت هستش که یک متن رو شما میتونی توش بنویسی که بهت نمایش بده.خب حالا بریم سراغ ویجت های stateful،ویجت های stateful برخلاف ویجت های stateless، که گفتیم immutable هستند و نمیتونند تغییر ظاهری داشته باشن، اینا اتفاقا mutable هستند و میتونند ظاهرشون رو تغییر بدن، ازشون استفاده میشه وقتی که نیازه توی المان های UI در برنامه تغییری ایجاد بشه ، بذار یه مثال بزنم براتون راحت متوجه بشید، فک کنید شما یه پالت رنگی دارید و میخواید وقتی روی یکی از این رنگ ها کلیک میکنید، متن موجود در صفحتون به اون رنگ در بیادش، یا اینکه وقتی روی یک دکمه کلیک میکنید عدد داخل متن یکی یکی اضافه بشه، اینکه شما دارید میبینید که اون ویجت داره ظاهرش تغییر میکنه، یعنی دارید از ویجت stateful استفاده میکنید.آها اینو هم یادتون نره که ما برنامه فلاتریمون رو با ترکیب کردن ویجت های مختلف با هم میسازیم.به مثال زیر دقت کنید، فک کنید یک ویجت دکمه دارید و یک ویجت متن، و میخواید هر بار که روی اون دکمه کیلیک میشه بتونید مقدار داخل اون ویجت متن رو یکی(+1) اضافه کنید، طبق عکس زیر میتونی عمل کنی:توی مثال بالا ما یک متغییر counter داریم و یک فانکشن incrementCounter که عدد counter رو یکی اضافه میکنه، و از طریق setState ظاهر برنامه رو آپدیت میکنه و به عدد جدید تبدیل میکنه و از طریق ویجت Text عدد آپدیت شده، نمایش داده میشه.خلاصه، فلاتر کلی ویجت داره که همه ی اون ویجت ها به دوتا دسته ی statefull و stateless تقسیم میشن. که همونجوری هم که متوجه شدید ویجت های stateless بدون تغییر ظاهری (در زمان اجرای برنامه) هستند. و ویجت های statefull قابلیت تغییر ظاهر رو دارند و از طریق متد Setstate برنامه رو یکبار rebuild میکنند و ظاهر ویجت رو تغییر میدن.امیدوارم این مقاله بدردتون خورده باشه، از اونجایی که من خودم توی ابتدای راه خیلی سخت متوجه شدم مفهوم این دوتا رو، خواستم یجوری اون رو توضیح بدم که خیلی راحت درک کنید مفهومشون رو. اگه این مقاله مفید بود براتون، ممنون میشم اون رو لایک کنید و نظر خودتون رو بنویسید. mohammad boustani mohammad boustani Sun, 25 Jun 2023 00:18:34 +0330 https://virgool.io/@mamadcodes/%DA%86%D9%86%D8%AF%D8%AA%D8%A7-%D9%BE%DA%A9%DB%8C%D8%AC-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%AA%D9%88%DB%8C-%D9%81%D9%84%D8%A7%D8%AA%D8%B1-hkhppojgs721 اول از همه باید بدونیم که ما چرا باید از پکیج ها توی فلاتر استفاده کنیم؟ اصلا آیا خودمون نمیتونیم اون ها رو بنویسیم؟ جواب بله هست، از اونجایی که فلاتر یک پلتفرم متن باز هستش، شما میتونید هر چیزی رو برای خودتون کاستوم کنید و اگه خیلی پکیج خفنی شد، حتی میتونید اون رو به نام خودتون منتشر هم کنید، ولی خب به احتمال زیاد بخاطر دلایلی که این پایین اشاره میکنم، شما هم مثه خیلیای دیگه، از پکیج های آماده و موجود استفاده میکنید.1- قابل استفاده مجدد: پکیج ها طوری نوشته میشن که قابلیت استفاده مجدد رو داشته باشند و شما به راحتی بتونید اون ها رو در پروژه های خودتون استفاده کنید. پکیج ها یه جورایی راه حل آماده ایه برای مشکلات ما توی پروژمون مثلا اگه بخواید به وب دسترسی پیدا کنید یا اینکه اگه بخواید استیت هاتون رو مدیریت state) management) کنید یا هر چیز دیگه ای، پکیج آماده براش موجود هستش. اصلا چه کاریه باز بری چرخ رو اختراع کنی؟؟!!!! 2- خلاقیتت رو بالا میبره، چطوری؟ خب پکیج ها اغلب با یک داکیومنت خوب همراه هستند. هم اینکه میتونید کلی چیز ازشون یاد بگیرید و هم اینکه از امکانات مختلفشون، خیلی خلاقانه توی جاهای مختلف پروژتون استفاده کنید. 3- پکیج ها عموما توسط افراد با تجربه و باسواد نوشته شدن و میتونید تقریبا مطمعن باشید که از کد تمیز و باکیفیتی دارید توی پروژتون استفاده میکنید. 4- یه مزیتی که فلاتر داره، کامیونیتی بسیار فعالش هست، پکیج ها وقتی وارد این کامیونیتی میشن، توسط برنامه نویس های مختلف استفاده میشن و مورد بررسی قرار میگیرن، که این باعث میشه اون پکیج بصورت مداوم آپدیت بشه.5- پکیج ها، چیزهایی که فلاتر کم داره رو جبران میکنند و ویژگی های خیلی خفنی میدن به برنامه نویس ها.6- پکیج ها معمولا برای سازگار بودن با پلتفرم های مختلف طراحی میشن که این خودش کار رو برای نوشتن یه پکیج شخصی سخت میکنه.خلاصه که پکیج ها بهتون کمک میکنه خلاق تر باشید و برنامه هایی بنویسید که خیلی خفنتر باشه. خب بریم چند از این پکیج های پر کاربرد رو معرفی کنیم:1- flutter_bloc: این برای همون مدیریت استیت ها و ایونت ها هستش که اون بالا یه اشاره کوچیک کردما. کلا بلاک چیز خفنیه، یادش بگیرید ، ازش استفاده کنید و حالشو ببرید. https://pub.dev/packages/flutter_bloc2- provider: اینم مثه بلاک، state management هستش، ولی خب سبکتر و راحتتر، یادگیریش هم مثه بلاک سخت نیست. https://pub.dev/packages/provider3- dio: یه پکیج قوی برای ارتباط با API و ارسال درخواست های HTTPhttps://pub.dev/packages/dio4- shared_preferences: اگه اطلاعات جزئی دارید که میخواید روی دستگاهتون ذخیره بشه، میتونید از این استفاده کنید، البته هر چیزیو تو این ذخیره نکنیدا، خیلی امن نیست، قبلش ببینید نیازتون چیه! https://pub.dev/packages/shared_preferences5- intl: با این پکیج هم میتونی تاریخ رو تو مدل ها و فرمت های مختلف ببینی، خیلی راحته استفاده ازش و خیلی ام کاربردی!!https://pub.dev/packages/intl6- flutter_svg: اگه میخوای عکس هایی با فرمت svg، وارد پروژت بکنی، میتونی از این کمک بگیری.https://pub.dev/packages/flutter_svg7- google_maps_flutter: همونطوری که از اسمش پیداست، برای استفاده از نقشه و نمایش نقشه مورد استفاده قرار میگره، یوتیوب و وب هم پره از مطالب آموزشی برای کار با این پکیج. https://pub.dev/packages/google_maps_flutter8- url_launcher: با این پکیج میتونید لینک های خارجی رو باز کنید. https://pub.dev/packages/url_launcher9- http: تو مایه های پکیج dio هست ولی کمی راحتر و ساده تر.https://pub.dev/packages/http10- cached_network_image : برای کش کردن عکس هایی که از اینترنت میگیری مورد استفاده قرار میگیره. https://pub.dev/packages/cached_network_image11- path_provider: اگر خواستی توی اپلیکیشنت دسترسی پیدا کنی به فایل ها و دایرکتوری های میتونی از این پکیج استفاده کنی، مثلا با همین پکیج میتونی مکان نصب برنامت رو پیدا کنی. https://pub.dev/packages/path_provider12- flutter_html : این پکیج هم مطالب تولید شده با html رو نشون میده. https://pub.dev/packages/flutter_html13-flutter_spinkit: مجموعه ای از loading indicator و progress spinner هستش. https://pub.dev/packages/flutter_spinkit14- firebase_core: اگر دارید از سرویس فایربیس استفاده میکنید، این پکیج یک سری از ابزارها رو برای مقداردهی اولیه و پیکربندی Firebase در برنامتون قرار میده. https://pub.dev/packages/firebase_core15- firebase_auth : اگه نیاز دارید که توی اپلیکیشنتون user authentication داشته باشید، میتونید از این پکیج استفاده کنید. https://pub.dev/packages/firebase_auth16- flutter_map : از این پکیج هم میتونیم برای نمایش نقشه استفاده کنیم. https://pub.dev/packages/flutter_map17 - flutter_form_builder: میتونی از این پکیج استفاده کنی برای اینکه فرم بسازی و از تکرار کد های اضافی و تکراری جلوگیری میکنه و اینکه میتونی validation هم بذاری، در نهایت هم کل اطلاعاتی که وارد شده توی فرم رو بصورت یکجا پاس میده به جایی که میخوای!https://pub.dev/packages/flutter_form_builder18-flutter_local_notifications : یک پکیج کراس پلتفرم برای نمایش و برنامه ریزی نوتیفیکیشن های لوکال هست و اینکه برای هر پلتفرمی بصورت جدا میتونید customize کنید. https://pub.dev/packages/flutter_local_notifications19- flutter_secure_storage : اگر اطلاعات مهم و حساس مثله پسورد یا API keys رو میخوای ذخیره کنی، این میتونه راه حل امنی باشه برای این کار. https://pub.dev/packages/flutter_secure_storage20- flutter_reorderable_list: اگر میخوای اون مدل لیست ها که کاربر بتونه آیتم هاش رو جابه جا بکنه داشته باشی، میتونی از این پکیج استفاده کنی. https://pub.dev/packages/flutter_reorderable_list21- image_picker :با این پکیج میتونی به گالری و دوربین موبایل دسترسی پیدا کنی و عکس مورد نظرت رو به برنامه اضافه کنی. https://pub.dev/packages/image_picker22- flutter_keyboard_visibility : اگر که میخواید برنامتون به تغییرات کیبورد (باز بودن یا بسته بودن)، گوش بده ومثلا بر اساس اون سایز المنت های UI رو تغییر بده، میتونید از این پکیج استفاده کنید.https://pub.dev/packages/flutter_keyboard_visibilityکلییییی پکیج دیگه هست که خیلی هم معروف و کاربردی هستش، اینایی که من اینجا اشاره کردم فقط بخشی از اون پکیج های کاربردی هستش، اگر شما هم پکیجی رو میشناسید و براتون مفید بوده، لطفا توی بخش کامنت ها بنویسید که بقیه هم بتونند از اونا استفاده کنند، ممنون از وقتی که گذاشتید برای خوندن این مقاله ;) mohammad boustani mohammad boustani Sun, 18 Jun 2023 09:53:57 +0330 https://virgool.io/@mamadcodes/buildcontext-%D8%AF%D9%82%DB%8C%D9%82%D8%A7-%DA%86%DB%8C%D9%87-lxeeryfsjizo یکی از معایب یادگیری فلاتر یا هر فریم ورک دیگه با ویدیوهای یوتیوبی اینه که دقیقا شما نمیدونید چرا دارید از یه ویجت یا المنت استفاده میکنید!!مثلا اگه من ازتون بپرسم چرا دارید از کلید ها در فلاتر استفاده میکنیم، خیلی از برنامه نویس های تازه کار نمیتونن جواب دقیق بدن.زمانی که کاربر از یک شاخه به شاخه دیگه از درخت ویجت میره، فلاتر از کلید ها برای ذخیره وضعیت ویجت ها در درخت ویجت استفاده میکنه، اغلب هم در ویجت های stateful استفاده میشه.بذار برگردیم به بحث خودمون، BuildContext !!توی کد بالا از BuildContext استفاده شده و در متد بیلد هم استارت میخوره . از context هم ما توی Navigator, MediaQuery, ListView builder و همه ی ویجت هایی که متد builder دارند استفاده میکنیم. اما دلیلش چیه؟!خب دلیلش اینه که، ویجت ها که کارشون ساخت رابط کاربری هستش، هیچ ایده ای ندارن که چه رابطه ای با ویجت های کناریشون دارن!! این رو هم باید بدونید که ویجت ها به خودی خود نمیدونن که در کجا از اوناها نمونه گیری شده و اطلاعاتی رو در این مورد ذخیره نمیکنند ،یعنی در واقع به خودی خود نمیتونن بفهمن که کجای صفحه قرار گرفتند.خب حالا چطوری کار میکنند؟ً؟!!اول از همه باید بدونیم که دقیقا ما از Context کجای کدمون استفاده میکنیم!، اون ها رو در ویجت های Stateless یا stateful استفاده میکنیم!بذارید کمی وارد جزئیات بشیم!همونجوری که میبینید ویجت Stateful هم از Widget اکستند(extend) شده که ویجت بودن stateful رو نشون میده و اگه بیشتر واردش بشیم(تصویر زیر) میبینیم که تمام گزینه ها و مواردی که هر ویجت دیگه داره رو داره اما یکی از اون ویژگی های بخصوص خیلی مهم هستش و اون هم createElement method هست. وظیفه این متد هم ساختن المنت ها (element) هست و این المنت ها همون اشیاء یا object هایی هستند که مسئولیت ثبت و نگهداری مکان ویجت ها و همچنین مکان children ها و parent ها رو برعهده دارند.وقتی شما یک ویجت جدید ایجاد میکنید،فریم ورک فلاتر، متد createElement رو صدا میزنه و اون المنتی که برمیگردونه، حاوی اطلاعات مورد نیازی هست که در زمان ساخت و اجرای برنامه کمک میکنه به پیدا کردن جایگاه اون ویجت در صفحه.اوکی ولی خب چرا باید از BuildContext استفاده کنیم؟قبل از اون باید بفهمیم که المنت چی هست.همونجوری که توی تصویر بالا مشاهده میکنید Element در واقع همون BuildContext هستش.دفعه بعد که خواستید از BuildContext استفاده کنید، یادتون باشه که وظیفش ودر واقع یادآوری مکان ویجت روی صفحه هستش.پ ن: این پست ترجمه شده از مقاله ای در وبسایت مدیوم هست.لینک پست: https://medium.com/@varunlohade/what-exactly-is-buildcontext-dd98403e2da2 mohammad boustani mohammad boustani Fri, 16 Jun 2023 10:03:09 +0330