یکی از ویجت های پر استفاده در فلاتر ویجت row هست که باعث میشه چندتا ویجت رو به صورت افقی و کنار هم تو صفحه داشته باشیم. این ویجت تا جایی که صفحه دستگاه اجازه بده، میزاره که داخلش ویجت قرار بگیره.
بعضی از مواقع پیش میاد که تعداد ویجت های داخل row از عرض صفحه هم بیشتر بشه که با ارور زرد رنگی مواجه میشیم که میگه جا نیست که همه المان ها تو صفحه جا بشن، یا اینکه ما نیاز داریم یه لیست افقی تو صفحه داشته باشیم که کاربرامون بتونن چیزی رو اسکرول کنن، تو این حالت ما میتونیم ویجت row رو داخل یه ویجت SingleChildScrollView قرار بدیم تا امکان اسکرول کردن لیست رو وقتی از عرض صفحه بیشتر شد داشته باشیم.
تصویر زیر نشون میده که عرض ویجت از عرض تعریف شده بیشتر شده و خطای کم بودن فضا به صورت رنگ زرد تو سمت چپ داره نشون میده.
تعیین نوع چینش ویجت های درون Row :
سه تا پروپرتی خیلی مهم تو ویجت row داریم که تو ادامه کار بهشون توضیح میدیم
پراپرتی MainAxisAlignment :
این پراپرتی جهت افقی فرزندان(ویجت های داخل row) را مشخص میکنه به این شکل میشه مشخص کرد فرزندان ویجت Row تو اول ، وسط ، انتها یا با فاصله از هم تو صفحه قرار بگیرند.
پراپرتی CrossAxisAlignment :
این پراپرتی هم برای تعیین جهت قرارگیری بچه های داخل ویجت row به صورت عمودی تو صفحه به عهده داره و این امکان رو میده که تعیین کنیم که این بچه ها در اول، وسط یا انتهای ویجت قرار بگیرند.
پراپرتی MainAxisSize :
این پراپرتی مشخص میکنه که ویجت row تا چه اندازه تو صفحه کشیده بشه، یعنی اگه اندازه آیتم های تو صفحه حتی کمتر از عرض صفحه هم بود، اندازه ویجت row به اندازه عرض صفحه بشه.
مطالب مرتبط
مهدی نعمتی
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 دیدگاه
ثبت دیدگاه
ایمیل شما نشر داده نمی شود