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