از Pista Academy حمایت کنید
خلاصه آموزشی
مرور سریع مفاهیم اصلی پیش از تماشای کامل یا برای جمعبندی بعد از آموزش.
در جلسه ۴۲ آموزش فلاتر، مدرس به بررسی نحوه مدیریت فضا و استفاده از کانستنت برای تنظیم اندازه صفحه در طراحی واسط کاربری پرداخته میشود. به ویژه، تمرکز بر روی استفاده از لیتوت بیلدر برای ایجاد شرطهایی بر اساس اندازه صفحه، به منظور کنترل نمایش اجزای مختلف واسط کاربری مانند تکست فیلد، امانت و دراپ دان در اندازههای مختلف صفحه است. همچنین، به اهمیت تبدیل این اجزا به ویجتهای مناسب برای سادهسازی کد و بهبود خوانایی اشاره شده است. در ادامه، با لیاوت بیلدرو کار کردن به عنوان یکی از مباحث اصلی جلسه مطرح شده است و جلسه به پایان رسیده است.
نکات کلیدی
استفاده از لیتوت بیلدر برای ایجاد شرطهایی بر اساس اندازه صفحه و کنترل نمایش اجزای واسط کاربری.
تبدیل اجزای مختلف واسط کاربری به ویجتهای مناسب برای سادهسازی کد و بهبود خوانایی.
یادگیری و کار با لیاوت بیلدرو به عنوان یکی از مباحث اصلی جلسه.
جلسه بعدی به بررسی یک اپلیکیشن دیگر خواهد پرداخت.
پرسشهای رایج
پاسخ کوتاه و مستقیم به پرسشهایی که معمولاً هنگام یادگیری این موضوع مطرح میشوند.
لیتوت بیلدر برای ایجاد شرطهایی بر اساس اندازه صفحه استفاده میشود تا نمایش یا پنهان کردن اجزای واسط کاربری را کنترل کنیم.
تبدیل اجزا به ویجتهای مناسب به سادهسازی کد و بهبود خوانایی کد کمک میکند.
جلسه بعدی به بررسی یک اپلیکیشن دیگر خواهد پرداخت.
آخرین بهروزرسانی محتوای متنی:
در این دوره جامع و پروژهمحور با فلاتر و دارت از صفر تا صد آشنا میشوید و با ساخت هشت اپلیکیشن واقعی که هر کدام نکات کلیدی و پرکاربرد فلاتر را پوشش میدهد، مهارتهای خود را به سطح بعدی میبرید. آنچه در این دوره یاد میگیرید: مقدمه و نصب ابزارها: آشنایی با فلاتر، دارت و راهاندازی محیط توسعه مبانی دارت و فلاتر: یادگیری سینتکس دارت و ساخت ویجتهای پایه با اپ «تاسانداز (Roll Dice)» غوطهوری در فلاتر: پیادهسازی اپ «کوئیز (Quiz)» برای مسلط شدن بر ساختار و چرخه حیات ویجتها دیباگ و رفع اشکال: تکنیکهای عیبیابی و ابزارهای Flutter DevTools واکنشگرایی و تمینگ: ساخت «Expense Tracker» برای یادگیری ویجتهای تعاملی، موضوعبندی (Theming) و طراحی ریسپانسیو مدیریت وضعیت (State Management): از Provider تا روشهای داخلی دارت با اپ «TODO» و «Meals» مسیریابی بین صفحات: ناوبری پیشرفته با «Meals App» و انتقال داده بین صفحات انیمیشنها و جلوههای بصری: افزودن حرکات پویا و تراکیب انیمیشنی در «Meals App» فرمها و ورودی کاربر: دریافت و اعتبارسنجی اطلاعات با «Shopping List» ارتباط با سرور: ارسال و دریافت HTTP، کار با JSON و REST API در «Shopping List» دسترسی به امکانات بومی دستگاه: استفاده از دوربین و ذخیرهسازی در «Favorite Places» فراخوانی پوش نوتیفیکیشن و چت زنده: ترکیب فلاتر با Firebase برای ساخت اپ چت با اعلان لحظهای بهروزرسانیها و چشمانداز آینده: نکات پایانی، منابع پیشرفته و مسیر یادگیری ادامهدار چرا این دوره؟ پروژهمحور و گامبهگام، مناسب برای تازهکارها و افراد با تجربه متوسط پوشش تمام جنبههای کلیدی: از طراحی رابط کاربری و انیمیشن تا اتصال به سرور و مدیریت وضعیت پیادهسازی چندین اپلیکیشن واقعی که میتوانید به سادگی برای نمونهکار شخصی یا پروژههای شغلی استفاده کنید لینک گیت هاب دوره جهت دسترسی به کد پروژه های هر فصل https://github.com/pistaacademy/flutter 🔔 همین حالا سابسکرایب کنید تا ویدیوهای آینده را از دست ندهید و یادگیری فلاتر را با هم شروع کنیم!
خب بریم سراغ اولین موضوع.
خب اولین موضوع چیه؟
الان اگه دقت بکنید بچهها
این دوربین گوشی من الان تو این مدل
اینجاست. درسته؟ توی صفحه اصلی
ما یه تایتلی داریم یه دون علامت پلاس
داریم ولی دوربین دخالتی توش نداره یعنی
نیفتاده رو دوربین اما بیایم تو صفحه بعدی
اینجا رو نگاه کنیم اینجاهم اوکیه خب
اینجا هم اوکیه من یه ذره صفحه رو بچرخونم
احتمالاً عدم استفاده از این فاصله هم شاید این دوربینه باشه چون ما یه چیزی
داریم داخل در حقیقت فلاتر بهش میگن سیفیا
زمانی که سیفریا فعال باشه
از یه سری جاهای فضاهایی توی صفحتون
استفاده نمیکنه کجا استفاده نمیکنه؟
جاهایی که دوربین هست خب پس بهتره که
سفریا فعال باشه برای اینکه من چون الان
امکان داره تو یه گوشی دیگه دوربین اینجا
باشه بیفته رو این تایتله حالا تو این مدل
گوشی وسطه ولی امکان داره گوشی بالا سمت
چپ باشه تو خیلی از گوشیا اونجاست برای
اینکه این قضیه رو جلوشو بگیریم اتفاقی
نیفته توی
اکسپنس میرید
توی مدالمون کجاست؟
اینجا که دقیقاً مدالمون باز میشه که ما
بخوایم اون اکسپنس جدیدو اضافه بکنیم. یه
چیزی اینجا اضافه میکنم به نام یوز
سیو اریا.
مقدارشو میذارم ترو.
خیالم راحت باشه که از اون ناحیه بالای
صفحه که دوربین توشه استفاده نمیکنم.
اصلا نگاه کنید یه ذره اومد پایین میبینید قبلاً این کامل بالا بود این
حالت اون رنگ بکگراندی که میدیدید یعنی
یه مقدار اومد پایین یعنی از این فضای
بالای صف دیگه استفاده نمیکنه خیالم
راحته یه روتیتم بدم
نگاه کن از بالا پایینم یه مقدار فاصله
داره دیگه
پس این نکته اول اما بریم سراغ نکته بعدی
نکته بعدی چیه؟ چیه
ما توی صفحه این خب وقتی اینو روتیتش بکنم
چون فضای کافی کافی دارم عرضم زیاده میخوام این اماونتو بیارم بذارم کنار
تایتل این در حقیقت انتخاب نوع هزینه رو
بیارم کنار دیت و این د تا دکمهم ردیف آخر
باشه چون فضا دارم میخوام این کارو بکنم
خب راهی که یاد گرفتیم چی بود استفاده از
مدیا کووری بود درسته ولی این دفعه
نمیخوام برم سراغ مدیا کوری میخوام بیام
سراغ یه روش دیگه
ما یه روش دیگه هم داریم برای اینکه در
حقیقت این کارو بکنیم
بهش میگن لیتوت بیلدر
لیا اوت بیلدر خب من اینا رو ببندم با نیو
اکسپنس فقط کار دارم
اینجا اینجا که مدیا کوی نوشتم مدور اینجا استفاده کردم من توی نیو اکسپنس
آ این استفاده کردم اوکی آ اوکی هیچی خب میام میگم که ریترن بکن
لیاوت بیلدرو که دیگه بیلدر داره درسته بیلدر چیه
یه فانکشنه که یه بیلد کانتکست به عنوان ورودی میگیره یه باکس کانسترنت این
دقیقاً نکته اصلی این کانسترنت هست که
اینجاست بچهها خب
میگم که من به تو یه دونه فانکشن میدم چیز انس فانکشن میدم
یه دونه سیتی ایکس به عنوان ورودی بهت
میدم ی کانتکستم و یه کانستنت
[موسیقی]
خب بیایم اینجا
حالا این کانستنته چی هست دقیقاً همون کار
مداوریو میکنه یعنی اندازه صفحمو داخل
خودش نگه میداره
این الان من میتونم خیلی راحت برم داخل کانسترنت اندازه صفحه رو ببینم
ولی قبلش میخوام یه کاری بکنم فعلاً این
ریترن رو بیارم
که این خطا بره این بیاد اینجا الان تفاوتی توی اپ ما
درست ایجاد نمیشه همچرا همونو ران میکنم
تفاوت ایجاد نمیشه. خب حالا بیایم سراغ این. میخوام از این استفاده بکنیم. از این
کانستنت استفاده بکنیم.
ما توی کانستنت میتونیم به اندازه صفحه
دسترسی داشته باشیم. چهجوری
مکس ویت
ارتفاع رم حتی میده
خب آها من بذار اینو باز کنم. ای بابا این اینو بعد باز میکردم. نگاه کن الان میگه
که عرض من ۶۴۰ه ارتفاع من ۳۶۳.
خب پس من دسترسی دارم که بر مبناییم بخوام
شرطیش بکنم. اینو پاک میکنم پس الان من
میام بر امنای این طول و عرض شرط میذارم.
خب میگم که اگر مثلاً انقدر بودی این د تا
رو بذار کنار هم اگه نبودی هیچی. اول اینو
بیام برزم داخل یه وریبلی
خب حالا میخوام از این استفاده کنم میام میگم که
داخل این کالم من الان اینجا چی دارم اینجا این کالمه
که کجا بسته میشه حالا فعلاً کاری نشد ببین تو اینجا
داخل چی اگر
عرض من بزرگتر مساوی ۶۰۰ بود
درون صورت یه چیزی
اگر نبود
یه چیز دیگه
خب اگه نبود یه چیز دیگه
حالا
بذارم اینجا باشه فعلاً بیام سراغش اگه نبود همون تکست فیلده رو ادامشو برو
خب الان اینو باید داخل فک کنم یه چیزی بذاریم که درست بشه الان درستش میکنم خب
اگر بزرگتر بود ۶۰۰ تا این تکست فیلدو نشون
بده
من فکر کنم چون به خاطر اینه بچهها اینو باید اینا رو نباید بذارم
اینا رو نمیخواد یعنی همین کافیه
درست شد اون براکتا رو نمیخواد بذارین یه ذره خوشگلش کنم
فرمت داکومنت خب پس اگر بزرگتر بود این
تکست فیلدو بذار کنار تکست فیلده میخوام
اماونتم نشون بدی خب کنار تکست فیلده
میخوام امانتم نشون بدی یعنی چیو؟ یعنی
این اکسپندده رو میخوام نشون بدی اینجا
بسته میشه
بینشونم یه سایز باکس بذارید بچهها
یعنی اینجا که این چیلی تکست فیلده کجا وصل میشه؟ اینجا بسته میشه. اینجا یه دونه
سایز باک میذارم.
مثلاً میگم عرضش باشه چون عرضه دیگه کنار همدیگه ۲۴ تا
بعد کنارش این امانتو بذار. این کدومون یه ذره شلوغه بچهها به خاطر
اینه که ما باید اینا رو هر کدوم تبدیل
کنیم به یه ویجت. مثلاً این تکست فیلد بشه
یه ویجت که خود ویجته رو اینجا بذارم
انقدر کد ننویسم ولی اشکال نداره فعلاً با
همین روش بریم جلو
پس اگر بزرگتر ۶۰۰ باشه یه تکست فیلد نشون
میده یه سایز باکس ۲۴ تایی یه دونههم
کنارش میاد اماتو نشون میده اگرم نباشه
فقط تکست فیلدو نشون میده
درست شد همینو تا الان بریم ببینیم
میگم اگر نباشه این تکست فیلدو نشون بده خب
اگر بزرگتر از اون بود یه رو نشون بده که چی لونش اینجاست اکسپندد
آها این تکست فیلدو بچهها باید داخل ورب
کنیم داخل اکسپندد اینم ریفکتور ورب
اکسپندد
این تکست فیلدم باید بره تو اکسپندد چرا چون داخل رو قرار گرفته کنارشم یه تکست
فیلد دیگهست
اگه داخل اکسپندد نذارید کل جا رو میخواد
بگیره.
درست شد. فقط الان تو یه راستا نیستن که اونو الان درست میکنن. خیلی ساده میشه
درستش کرد. یه چیزی اینجا داشتیم
کراس الاینمنت این آش
اینو با این میشه درستش الان درستش
میکنیم.
پس الان بزرگتر ۶۰۰ شد اینو نشون میده
اگه نباشه اینو نشون میدم خب اینجا درسته بریم سراغ مرحله بعدی
اول کلاس الاینمنتشو اضافه کنم
اینجا
قبل از این چیلی تو این رو میام میگم که
کراس الاینمنت
کراس پس الامن. استارت میذارم
که این د تا استارت بهم بالا شروع بشم. الان بهتر شه. حالا اینتو باید بردارم
اینو بیارم بالا پس اینجا باید یه شرط
دیگه بذارم. بگم اگه بالاتر ۶۰۰ تا بودی
اینو بردار اینو جاش بذار. اگه نبودی که
مثل قبل باشه. میام پایین. هست تو ردیف
بعدی این ردیف
که الان یه تکست فیلد دارم خالی دارم
فقطتو نشون میده اینو باید بردارم شرطشو
اینو بیارم بذارم جاش خب پس بریم یه دونه
شرط دیگه هم بنویسیم
میام میگم که بعد از این السو گذاشتم اینجا اینجا بعد از
اینجا میگم اگر
عرض من بزرگتر مساوی ۶۰۰ بود
اون پایینی رو نشون بده خب یه بار این مرتبش کنیم اینجوری
حالا تو اون روئعه قراره چی نشون بدم من
تو این روئ باز یه چیزی رو میذارم
سمت چپ میشه اون دراپ دانه راستش میشه تقویمم درسته پس ایمانتو کاری ندارم
میام میگم که
این چیه این دیت پیکرمه نه
اینو میخوام بیاریش دراپ دانو میخوام
بیاری
کنارش اون تقویمه رو بیار این نه فکر کنم اینا آره
اگر نبود تو همین اینو نشون بده امامتو نشون بده هیچ اشکال اشکالی نداره یه سایز
باکسم بذارید بذارم کنارش بچهها
بین این دراپ دان
و این دیتا یه سایز باکسم بذاریم مثلاً
همون ۲۴ تا خوبه
اگه نبود فقط امانتو نشون بدم
این اومد اینجا کنار این درسته حالا باید یه شرط دیگه بذارم بگم اگه بالاتر ۶۰۰ تا
بودی اینو دیگه اینجا نشون نده فقط اینو
نشون بده میشد ۳ تا شرط پس میام پایین
اینجاها باید بذارم شرطو
میام میگم که
این الس که هیچی بذار اینو من میتونم ببندمش اینجور خیلی خوب میشه
اینجا بعد از این سایز باکسه اینجا یه ایف میذارم
ویت بزرگتر مساوی ۶۰۰ بود یه رو نشون بده
ارس اگه نبود اون پایینیو نشون بده اینو نشون بده یه ذره بذار اینو خوشگلش کنیم خب
حالا اگه بالاتر ۶۰۰ تا بود این دکمهها
رو نشون بده تکستبات ما اینا رو
اوکی شد این دکمه رو فقط دار نشون می کاش این دکمه روم میشد آورد وسط نه همین جاش
خوبه ولش اوکیه حله میشه آورد وسط هیچ
کاری نداره ولی همونجاش اوکیه
اینم از این یه ذره کدمون شلوغ شد بهخاطر اینکه ما کد تکراری داریم نباید اینجوری
باشه بچهها باید شما اینا رو دونه دونه
تکست فیلدا رو دکمهها رو دراپ دانا رو
اینا رو تبدیل کنید به یه ویجت جدا که فقط
اسم ویجتو بذارید کدتون سبکتر و خیلی
بهتر میشه حالا کاری ن ما فعلاً داریم فقط
یاد میگیریم خب اینم از این جلسه که ما
میخواستیم این لیاوت بیلدرو یاد بگیریم و
باهاش کار بکنیم بریم بیایم جلسه بعدی
میخوایم بریم بریم سراغ یه اپلیکیشن دیگه
و این برنامه کلاً تموم شد فعلاً خداحافظ