ویجت column یکی از پر استفاده ترین ویجت ها تو فلاتر هست که برای چینش ویجت های دیگه به صورت عمودی استفاده میشه
این ویجت تا جایی که صفحه نمایش دستگاه اجازه بده این امکان رو میده که عناصر مختلف رو داخلش قرار بدین و اگه نیاز باشه ویجت های بیشتری رو هم تو این ویجت قرار بدیم باید اسکرول رو هم به این ویجت اضافه کنیم. برای اینکه اماکن اسکرول کردن رو یه ویجتی بدیم SingleChildScrollView استفاده میکینم که اگه محتوای داخل column از ظرفیتش بیشتر بشه بقیه المانهای ما به صورت اسکرول قابل نمایش باشه.
زمانی که المان های داخل column بیشتر از ظرفیت باشه و اسکرول هم نداشته باشه با چنین خطایی رو به رو میشیم
داخل این ویجت سه ابزار خیلی مهم قرار داره که باهاش میشه کارای کنترلی رو انجام داد
پراپرتی MainAxisAlignment :
این پراپرتی وضعیت عمودی children (آیتم های داخل) را در این ویجت مشخص میکند به این شکل که میشه تعیین کرد آیتم ها در بالای صفحه، وسط، پایین صفحه یا با فاصله برابر از یکدیگر تو صفحه چیده بشن.
پراپرتی CrossAxisAlignment :
این پراپرتی هم برای تعیین جهت قرارگیری children به صورت افقی تو صفحه هست و تعیین میکنه که آیتم ها در اول، وسط یا انتهای قرار بگیرند .
پراپرتی MainAxisSize :
این پراپرتی مشخص میکنه که ویجت column تا چه اندازه تو صفحه کشیده بشه، یعنی اگه اندازه آیتم های تو صفحه حتی کمتر از سایز صفحه هم بود، اندازه ویجت column به اندازه سایز صفحه بشه.
مطالب مرتبط
مهدی نعمتی
04/23/2022 12:17:07افزونه های VS code مورد نیاز برای فلاتر
تو این پست میخوام یه سری افزونه (Extension) برای ویژوال استدیو کد (Visual Studio Code) رو معرفی کنیم که یه سری از این افزونه ها برای پروژه های فلاتر هست و یه سریشون هم کلا برای کد نویسی به زبان های دیگه هست تا کد نویسی ساده تر و سریعتر بشه. 1 . ساخت ویجت ها تو فلاتر به سریعترین شکل با Awesome Flutter Snippets این ویجت مجموعه ای از ویجت ها، کلاس ها و متد های پر استفاده رو تو خودش نگه میداره که میتونین خیلی سریع و با نوشتن چند حرف از اون ها استفاده کنین. ( لینک ) 2 . بدون رفتن به مرورگر مستقیم پکیج به پروژه اضافه کن با Pubspec Assist دیگه نیازی نیست برای پیدا کردن یه پکیج بری و مرورگر رو باز کنی و دنبال پکیجت بگردی و اسمش و کپی کنی و بیاری تو اپ، با کمک این پکیج خیلی ساده تر میتونی پکیج مورد نظر رو پیدا کنی و خودکار به اپ اضافه بشه. برای اینکار از کلید های Ctrl + Shift + P رو میگیریم بعدش میگیم که Pubspec Assist رو میخوایم ، مرحله بعدش نوع ش رو میگیم که چی باشه که یکی از دو مورد normal یا dev هست و بعدش هم اسم پکیجمون و دکمه انتر و تمام. ( لینک ) 3 . استفاده ساده تر از کتابخانه Reverpod با افزونه Flutter Riverpod Snippets اگه خواستین از کتابخونه reverpod راحتتر استفاده کنین این افزونه دقیقا برای همین کار ساخته شده ( لینک ) 4 . منظم کردن ایمپورت های dart-import با دو جرکت ایپورت های صفحه رو مرتب کن ، اول با گرفتن کلید های Ctrl + Shift + P و بعدش هم تایپ Fix Imports و زدن دکمه انتر ( لینک ) 5 . دادن آیکون مرتبط با هر فولدر به جای آیکون ساده فولدر یا Material Icon Theme فقط کافیه این افزونه رو نصب کنید، خودش بقیه کارا رو انجام میده ( لینک ) 6 . حذف فضای خالی بیهوده از کدها با افزونه Remove empty lines برای اینکه تو سریعترین حالت ممکن فضای خالی اضافه را حذف کنین از این افزونه میتونید استفاده کنید، کار باهاش هم راحته دکمه های Ctrl+ Shift + P و عبارت Remove empty lines را بنویسید. 7 . گرفتن اسکرین شات تو یه زیبا با CodeSnap برای این کار کلید های ترکیبی Ctrl + Shift + P رو میگیریم و عبارت CodeSnap رو تایپ میکنیم، کدی که میخوایم رو انتخاب میکنیم و بعدش آیکونی که برای ما به نمایش در میاد رو میزینم ،اسکرین شات آماده میشه
.jpg)
مهدی نعمتی
04/22/2022 08:08:35چه شرکت هایی از فلاتر استفاده میکنن
اگه هنوز هم به قدرت فلاتر ایمان نیاوردین، تو این پست میخوایم چندتا از پروژه های خوب فلاتری که توسط شرکت های بزرگ توسعه داده شده رو بررسی کنیم تا ببینیم چقدر فلاتر میتونه قدرت داشته باشه Google Pay سرویس گوگل پی بیش از 100 میلیون کاربر تو کشور های مختلف داره و اپی که برای این کار داشته و حدود 1.7 میلیون خط کد برای اندروید و ios نوشته بودن. یه حساب و کتاب ساده هم انجام بدیم متوجه میشیم یه تغییر تو یه لاجیک چه وقتی رو از تیم توسعه میگرفته یا اینکه اگه مشکلی وجود داشت باید دو تا اپ با هم مشکلشون حل میشد. از اون سمت هم برای هر پلتفرم نیاز به تیم و افراد بیشتری هم بوده. اینجوری شد که گوگل تصمیم گرفت این پروژه رو به فلاتر منتقل کنه، که نتیجه این کار به این شکل شد که : حدود 70% کار کردن روی این پروژه کمتر شد حدود 35% هم تعداد خط از کد ها کمتر شد این تغییر تا حدی خوب بود که David Ko مدیر بخش مهندسی (Engineering Director) گفته بود که : «همه فلاتر را دوست داشتند؛ می توانستیم هیجان را در چهره های افراد ببینیم که در مورد سرعت ساخت یک رابط کاربری صحبت می کردند.» eBay ایبی رو که همه میشناسیم تقریبا، داستان از اونجا شروع میشه که کسایی که تو کار خرید و فروش ماشین بودن به ایبی اعتماد خاصی داشتن، و تو سال 2018 تیم eBay Motors با خودشون میگن یه اپ مخصوص این افراد تولید کنیم که کارشون راحتتر بشه، بعد از اینکه تیمشون نشست و بررسی کرد متوجه شدننوشتن دو تا اپ یکی برای اندروید و یکی ios تو اون مدت زمانی که داشنن غیر ممکنه، برای همین دنبال یه سیستم چند پلتفرمی میگشت. اون زمان تازه نسخه های اولیه فلاتر منتشر شده بود و ایبی تقریبا یک ماهی رو روی بررسی فلاتر وقت گذاشت در نهایت فلاتر رو انتخاب کرد. ایبی یه گروهی رو فرستاد به یه دوره آموزش فلاتر و بعدش کارش رو شروع کرد، و هرچقدر هم کارا رو پیش میبردن بیشتر از این فریمورک لذت میبردن تا جایی که کوری اسپراگ، مهندس ارشد (Senior iOS Engineer) گفته بود که "فلاتر نه تنها انتظارات ما را برآورده کرده، بلکه به طور چشمگیری از آنها فراترهم رفته است." یه نگاهی هم بخوایم به آمار ایبی از این کار بندازیم میرسیم به اطلاعات زیر : 98.3 درصد کدهای مشترک بین پلتفرم ها سرعت توسعه تقربیا دو برابری تمامیه توسعه دهندگان گفتن که فلاتر رو به روش های فعلی ترجیح میدن! لینک مقاله رو در سایت ایبی میتونید تو این لینک مشاهده کنید Alibaba Group علی بابا بزرگترین فروشگاه دست دوم کالای تو کشور چین هست که یه بخشی از کارش رو روی اپ فلاتر آورده، وقتی که تیم Xianyu خواست یه برنامه ای داشته باشن که کراس پلتفرم (cross platforms)، از سرعت و پرفرمنس بالایی برخوردار باشه اومد سراغ فلاتر Sua Musica اپی که بیش از 10 میلیون کاربر فعال تو ماه داره، بعد از استفاده از فلاتر یه آماری داده : بیش از 350 درصد افزایش رضایت بیش از 13 درصد افزایش در eCPM Toyota شرکت ژاپنی تویوتا هم دنبال یه سیستمی بوده که بتونه باهاش رابط گرافیکی قدرتمندی رو ایجاد کنه و از اون سمت هم بتونه با سیستم موجود خودش رو وفق بده،بعد از استفاده از فلاترخیلی راضی بودن تا اونجایی که دانیل هال، مهندس ارشد تویوتا موتور توآمریکای شمالی دلیل اصلی موفقیت فلاتر تو شرکت رو متن باز بودن و جامع نرم افزاری قوی اون اعلام کرده خب اپ های خارجی رو بررسی کردیم؛ یه اپ دیگه ای هم هست که تو ایران با فلاتر نوشته شده که خیلی هم معروفه تلوبیون وارد توضیحات بیشتر نمیشیم، اپیه که معروفه و خیلی ازش استفاده میکنن، یه جمله ای از طرف برنامه نویسش میزارم فقط : "این پروژه چالش واقعا بزرگی برای من بود و از طرفی ریسک زیادی هم داشت، چون تا به حال هیچ برنامه ای در ایران با 14 میلیون نصب فعال، با فریمورک نوپایی مثل فلاتر پیاده سازی نشده بود."
مهدی نعمتی
04/22/2022 08:08:30ویجت Expanded در فلاتر
امروز هم میخوایم یه ویجت خیلی کاربردی رو معرفی کنیم، ویجتی که میتونه جای خالی رو پر کنه ! قبلا در رابطه با ویجت های Column ( لینک معرفی ) و ویجت Row ( لینک معرفی ) صحبت کردیم و دیدیم که چجوری کار میکنن و واسه چه کاری به وجود اومدن. مثلا برای ویجت Row اگه بخوایم ببینیم چیکار میکنه، اینجوریه که اگه کدی شبیه به زیر داشته باشیم Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ MyWidget(), MyWidget(), MyWidget(), ], ), خروجی شبیه به زیر رو خواهیم داشت : تو یه سری از سناریو ها پیش میاد که ما نیاز داشته باشیم یه ویجتی بیاد کل فضای خالی رو برای خودش بگیره ، مثلا تو تصویر بالا به جای اینکه آیتم وسط دو طرفش خالی باشه، کل فضای خالی رو برای خودش بگیره، تو این حالت میتونیم از ویجت Expanded استفاده کینم. به کد زیر دقت کنید : Row( children: [ MyWidget(), Expanded( child: MyWidget(), ), MyWidget(), ], ), با توجه به این کد ما خروچی شبیه به این رو خواهیم گرفت : ما وامدیم تو ویجت Row توضیح دادیم و نشون دادیم چجوری قرار میگیره، تو ویجت Column هم شرایطی دقیقت مثل همین ویجت Row را خواهیم داشت و هیچ تفاوتی نداره. حالا بعضی مواقع پیش میاد که ما دو تا از ویجت های ما باید فضای خالی رو پر کنند که میتونیم دو تا ویجت Expanded استفاده کنیم، یا مواردی هم پیش میاد که جای خالی موجود نباید به صورت مساوی بین ویجت های Expanded تقسیم بشه، تو این حالت ما میتونیم از پراپرتی flex استفاده کنیم و مقدار را برای آن تنظیم کنیم، به کد زیر دقت کنید : c hildren: [ MyWidget(), Expanded( flex: 2, child: MyWidget(), ), MyWidget(), Expanded( flex: 1, child: MyWidget(), ), ], ), خروجی کد بالا به شکل زیر خواهد بود : با توجه به کد و خروجی مشخصه که ویجتی که پراپرتی flex با مقدار 2 را گرفته دو برابر فضا را نسبت به ویجتی که پراپرتی flex با مقدار 1 را گرفته اشغال کرده است.
0 دیدگاه
ثبت دیدگاه
ایمیل شما نشر داده نمی شود