کاربرد mediaquery در فلاتر
وارد محیط کد نویسی میشیم برای اینکه با مفهوم mediaquery آشنا بشیم من میام از دوتا Textfield استفاده میکنم و به صورت زیر کد نویسی میکنم :
خب دوستان Container و Text هامون رو هم ایجاد کردیم
حالا میخوایم با mediaquery کار کنیم اول یه توضیح بدم این mediaquery برای ما چی کار میکنه
اگه دقت کرده باشید هر دیوایس و دستگاه موبایل یه اندازه خاصی داره
حالا ما برای اینکه بتونیم اندازه های این ویجت ها مثلا container و Textfield هامون و یا دکمه هایی که داریم رو تنظیم کنیم
که برای هر دیوایس یه اندازه خاصی رو بگیرن میتونیم از این mediaquery استفاده کنیم
به عنوان مثال من میام داخل continer یه width دستی بهش میدم و به صورت زیر کد نویسی میکنم :
توی فیلم بالا من دستی بهش مقدار میدم
اما وقتی اسکرین و چرخوندم سایز این container من تغییر نکرد برای اینکه این سایز تغییر کنه
و مطابق با سایز اسکرین دیوایس ها بشه به صورت زیر از Mediaquery استفاده میکنیم و کد نویسی میکنیم.
خب الان میبینید که سایز Container من با چرخوندن اسکرین تغییر میکنه و متناسب با عرض صفحه خودش رو ست میکنه !
حالا اگه من بخوام یه سایز خاص رو بهش بدم به صورت زیر کد نویسی میکنیم.
توضیحات تکمیلی
توی فیلم بالا دیدید که در حالت کلی گفتم بیا این width رو نگاه کن اگه سایزش مثلا از 550 بیشتربود اندازه صفحه باشه مثلا 500 در غیر این صورت ضربدر 95 !
و بعد بهش Target و پاس میدیم خب دوستان دیدید که تونستیم ویجت های مختلف و کاربرد mediaquery در فلاتر رو داخل دیوایس ها با هر اندازه ای و کنترل کنیم و به صورت ریسپانسیو نمایش بدیم.
اگه توی درک کد نویسی بالا کمی دچار مشکل شدید حتما چند بار از اول آموزش رو ببینید و با دقت خودتون هم کد نویسی کنید کاملا ساختار mediaquery دستتون میاد و خیلی ساده میشه ازش استفاده کرد.
توی بخش بعدی میبینمتون.
