از Pista Academy حمایت کنید
مرور سریع مفاهیم اصلی پیش از تماشای کامل یا برای جمعبندی بعد از آموزش.
در جلسه 40 آموزش فلاتر، مدرس به بررسی ریسپانسیو بودن برنامه میپردازد. به طور خاص، نحوه کنترل رفتار برنامه در حالتهای مختلف چرخش گوشی (عمودی و افقی) و تنظیم لیوتها بر اساس ابعاد صفحه مورد توجه قرار میگیرد. همچنین، استفاده از سرویسها و شرطیسازی برای این منظور به طور کامل توضیح داده میشود.
نکات کلیدی
ریسپانسیو بودن برنامه به معنای پاسخگویی به تغییرات حالت چرخش دستگاه است.
برای تنظیم لیوتها در حالتهای مختلف چرخش، از سرویسها و شرطیسازی استفاده میشود.
کنترل رفتار برنامه در حالتهای چرخش به منظور بهبود تجربه کاربری ضروری است.
استفاده از شرطیسازی به برنامه امکان تعیین رفتار متفاوت در حالتهای مختلف را میدهد.
متن ویدیو
متن زمانبندیشده این جلسه برای مرور، جستجو و دسترسی سریعتر.
سلام عرض میکنم خدمت دوستان عزیز. بریم سراغ ادامه بحثمون و از امروز میخوام یه
فصل جدیدو شروع بکنیم و یه چند جلسهای
زیاد طولانی نیست در رابطه با بحث
ریسپانسو بودن برنامون صحبت بکنیم.
ریسپانسیو بودن برنامه یعنی چی؟ بذار من
برنامه رو راه میکنم.
خب تا برنامه بیاد بالا
منش ببندم خب حالا ریسپانسیو یعنی چی فرض کنید مثلاً کاربر ما خب بذارید من روتیت
اینو فعال کار کنم
اتورتیتش آنه خب
چیه ولش کن گوشی رو میچرخونم
خب نگاه کنید برنامه چرخید میبینید الان
ظاهر برنامه خیلی خوب نیست یعنی مناسب
صفحه افقی نیست یا مثلاً اگه تبلت داشته
باشید فرض کنید خب و این اسکرولش میبینید
چقدر بده این فضای خیلی کمی داره چارت
خیلی فضای زیادیو گرفته
بعد این چطوره؟
اینم نگاه کنید کل فضا رو نتونسته اشغال
بکنه یه تیکه رو گرفته اینم خوب نیست میشه
کل فضا رو گرفت حتی همین حالتم بد نیستا
ولی خوبم نیست یعنی این بهتره که این عوض
بشه
این میشه اون چیزی که میخوایم الان درستش
بکنیم یعنی
بریم سراغش که درست کنیم
خب اولین کاری که میکنیم د تا درق چیزو
باید نصب بکنیم میایم توی فایل پاور اسپک
اینجا توی قسمت دپند
آها اینو بچهها حتماً مطمئن باشید نصب
باشه خب این حتماً نصب باشه اینو اضافه
کنید اگه نصب نبود احیاناً خب بعد بیاید
این دستورو بزنید توی ترمینال
بیاید بزنید فلات
پاب
گت
اون دو خطو بنویسید بعد اینو بزنید براتون
نصبش میکنم
این د تا خب بریم سراغ
کارمون میم تو فایل اکسپنس ببخشید میام تو
فایل مین جایی که برنامه اصلیم داره اجرا
میشه
قبل اینکه بخوایم بریم ساب ریسپانسیو
میخوام یه راه دیگه بهتون نشون بدم
شما این امکانو دارید که بیاید
برنامهتونو به نحوی بچینید که اصلاً تو
حالت افقی کار نکنه
یعنی بگید که آقا من برنامم فقط تو حالت
عمودی کار میکنه ولاغیر یعنی اگه گوشیتو
افقی بکنی برنامه من افقی ی نمیشه اینم یه
آپشنه چهجوری این کارو میکنیم
اول باید دیتکت بکنیم که گوشی وقتی افق
عمودی هست برنامهمون کار میکنه برای این
کار من میگم که
ایمپورت کن
از پکیج دو نقطه
از خود فلاتر
چی رو برامون بیا یه چیزی هست به نام سرویس
د اینو میخوام من از طریق سرویس میتونم
به جهت یا چرخش دسترسی داشته باشم
بعد میام میگم که
[موسیقی]
این ابتدای برنامم من بچهها این ران اپو
کلشو کات میکنم کلشو از اینجا برمیدارم
مینو خالی باشه میام برو توی سیستم
پریفر اورینتیشنز خب
به این صورت بگو که دیوایس اورینتیشن دا حالت پورتره آپ
یعنی اگه حالت پورتره بود پرترشون عمودیه اگه حالت پورتره آپ بود بعدش چیکار کن
داتن
بعدش
یه انونومس فانکشنو فراخون خونه کن و تو این انالس فانکشنه بیا اون اپو ران کن
پس میگم فقط تو حالتی که پورتر آپه بیا برنامه رو ران کن
بریم ببینیم خروجی رو
البته که چیز دیگه هم لازم داره یه خط دیگه هم لازم داره قبل از سیستم اورینتیشن
باید یه چیزی هم بنویسید اجازه بدید ببین
یادم رفت آها اینجا بعد بنویسید
ویجت ویجت
فلاتر بادینگ
اینور اینز اینا هست حالا را
خب من گوشی رو میچرخونم ببینیم چی میشه نگاه کنید برنامه حالت افقی پیدا نکرد رو
همون حالت عمودیش ش باقی مونت و طرف مجبور
گوشی رو بچرخونه دوباره خب
بگرد پس اینم میشه یه آپشنمون اما بریم
سراغ راه دیگه
اما بریم سراغ راه دوم راه دوم اینه که ما
برای
حالتهای مختلف صفحه لیوتهای مختلف داشته
باشیم اول بریم سراغ اینکه بفهمیم
ابعاد باد گوشی ما توی حالت افقی و عمودی
چقدره؟ اول من این قبلیا رو پاک کنم.
این سرویسم پاک کنم. این پایین باید اینم
پاک کنید.
خب
میرم تو فایل.
کاری که میخوایم بکنیم اینه که اینجا که داریم چارتو نشون میدیم و اون
اکسپند د الان تو کالمه. وقتی حالت افقی
میشه باید کانال بشه رو یعنی شرطیش باید
بکنم
میام میگم که
[موسیقی]
اول ببین ابعاد گوشیمون چیه میگم پرینت کن چیو پرینت کن برو توی مدیا کوری ی خب
برو توی مداکوری دات آف
کانتکستو بگیر
برو توی سایز
عرضشو بهم بده
خب اپانچ میکنم بالا با خود اپ کار ندارم میخوام اینجا ببینم چی نشونم بدم میام توی
دیباک این آ۶ش گوشی که من اینجا امولاتور
استفاده میکنم ۴۱۱ در ۸صد و
۹۰ه حالا گوشی رو بچرخونیم
ببینیم ابعادمون تغییر میکنه
بعد تغییر میکرد با چرخش باید تغییر میکرد که نکرد
خب ایرادی نداره اشکال نداره اینو میبندیم حالا کاری که میکنیم اینه که
میام اینو
ارتفاع رو کاری ندارم اینو در قالب یه
وریبل ذخیره میکنم
فاینال اسمشم وید میذارم مساوی این خب
حالا میام پایین این قسمتو این قسمتو
شرطیش میکنم میگم اگه عرض من از یه عددی
کوچیکتر بود این کارو بکن اگه بزرگتر بود
این کارو بکن
این کالمو
برمیدارم میگم که یه وریبلی دادم دارم ویت اگه کمتر
از ۶۰۰ تا بود
یه چیز نشون بده نبود یه چیز دیگه درسته
اگه کمتر از ۶۰۰ تا بود
همون کالمو نشون
قال بشه رو پس زیر ۶۰۰ تا به صورت عمود عمودی نشون میده بالا ۶۰۰ تا افقیش میکنن
خب بریم ببینیم چه اتفاقی میفته الان.
این چارت ما چارت ما یه ویژگی داشت اونم این بود که بذارید پیداش کنم اینا
این این خط داره کارو خراب میکنه. این خط
معنیش چیه؟
این خط میگه که من هر چقدر که فضا در اختیارم باشه استفاده میکنم. ما
نمیخوایم اینجوری باشه. ما میخوایم بگیم
تو اون فضای افقی رو باید تقسیم بکنی الان
بین خودت و اکسپنس اکسپنسز.
یعنی باید بین خودت و این دوست بغلی تقسیم
کنی. میام چیکار میکنم؟ ایشون رو هم
ور میکنم داخل اکسپنددت.
خود چارت رو هم میبرم داخل اکسپندد که
این رفتار ازش بگیرم.
پس میام اینجا اینو برمیدارم.
یه اکسپندد میذارم
و اینو میذارم داخلش.
نکته نیست که هنوز لاکه این برنامه من چرا این کهه اونو پاک کردم اینور
بذار من این برنامه رو استاپ کنم. خب یه بار دیگه رانش کنم.
خب ببینیم مشکل حل شد یا نه. من اینو دوباره میچرخونم. آها الان درست شد. خب
میبینید الان فضا بین خودشون تقسیم شد و
یه چیز بهتری شد نسبت به اون حالت قبل.
من برگردم گوشی رو حالت عادی
بنام میچرخه. خیلی هم عالی پس این الان
شد کاندیشنال.
بریم بیایم اداش جلسه بعدی صحبت کنیم.
فعلاً خداحافظ.
پرسشهای رایج
پاسخ کوتاه و مستقیم به پرسشهایی که معمولاً هنگام یادگیری این موضوع مطرح میشوند.
برای اعمال ریسپانسیو بودن، از سرویسها و شرطیسازی استفاده میشود تا لیوتها در حالتهای مختلف چرخش تنظیم شوند.
باید از سرویسها و شرطیسازی استفاده کرد تا رفتار برنامه در حالتهای چرخش به طور خودکار تنظیم شود.
از سرویسها و شرطیسازی برای کنترل ریسپانسیو بودن و تنظیم لیوتها در حالتهای مختلف چرخش استفاده میشود.
آخرین بهروزرسانی محتوای متنی:
در این دوره جامع و پروژهمحور با فلاتر و دارت از صفر تا صد آشنا میشوید و با ساخت هشت اپلیکیشن واقعی که هر کدام نکات کلیدی و پرکاربرد فلاتر را پوشش میدهد، مهارتهای خود را به سطح بعدی میبرید. آنچه در این دوره یاد میگیرید: مقدمه و نصب ابزارها: آشنایی با فلاتر، دارت و راهاندازی محیط توسعه مبانی دارت و فلاتر: یادگیری سینتکس دارت و ساخت ویجتهای پایه با اپ «تاسانداز (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 🔔 همین حالا سابسکرایب کنید تا ویدیوهای آینده را از دست ندهید و یادگیری فلاتر را با هم شروع کنیم!