پرش به محتوا

ویجت Container در فلاتر ( بخش 6 ) ❤️

     توی این آموزش با ویجت container آشنا میشیم !

    سایت مرجع فلاتر

    ویجت Container در فلاتر

    و Padding , Margin خب مثل همیشه میریم سراغ Body برناممون جلوی Body تایپ میکنیم Container برای اینکه بتونیم از Padding و Margin استفاده کنیم

    حتما باید از Container استفاده کنیم یعنی اگه ما خواستیم به یه دکمه Padding و Margin بدیم باید پدر اون ویجت ما Container باشه

    تا بتونیم از Padding و Margin استفاده کنیم واسه اینکه بیشتر آشنا بشیم من اول میام یه Color به Container میدم.

    color : Colors.Grey[400];

    و بعد من این و اجرا میکنم

    توی تصویر بالا میبینید که Container من اومد و کل Body رو گرفت خب حالا من اگه بخوام یه فرزند بهش انتصاب بدم و یه Text و بهش بدم مثلا Text هم باشه Hello و دوباره اجرا کنم

    میبینید که کل Container من شد متن Hello کوچیک توی تصویر بالا حالا بیاییم کمی با Padding و Margin بیشتر آشنا بشیم

    اول من از Padding شروع میکنم ببنیم برامون چه کاری وانجام میده ؟ میام توی قسمت Container میگم که یه Padding دارم واسه اینکه از padding استفاده کنیم باید یه عدد به Padding بدیم به اندازه این عدد 20 ما Padding و به ویجت ما اعمال کنه مثال زیر:

    padding: EdgeInsets.all(20.0)

    وقتی میگیم Padding یعنی این ویجت ما از داخل خودش فاصله بگیره ! و وقتی که میگیم EdgeInsets.all یعنی از همه طرف به مقدار 20 فاصله بگیره

    خب مورد دیگه ای که این داره مثلا only هست که میتونیم به شکل زیر ازش استفاده کنیم:

    وقتی میگیم only باشه به جای اینکه بگیم از کل و از همه طرف فاصله بگیره مثلا میگیم فقط از بالا و Top فاصله بگیره:

    padding: EdgeInsets.only(top: 20.0,bottom: 30)

    خب میبینید که با only تونستیم یکی از این متد ها رو بنویسیم هم میتونیم هر چهارتا آیتم رو بنویسیم زیاد تفاوتی نداره میتونیم هر چهارتا متد رو بنویسیم با مقداری فاصله ای که میخوایم ویجت ما از داخل بگیره خب مورد بعدی که داره اسمش هست fromLTRB  که شامل left, top, right, bottom هست مثال زیر

    padding: EdgeInsets.fromLTRB(20, 10, 30, 20)

    میبنید به همون شکلی که من بهش داده بودم اومد و Padding واعمال کرد برای container من تفاوت این fromLTRB  با only در این هست که ما در only میتونیم مثلا padding و فقط از بالا اعمال کنیم ولی توی fromLTRB  ما باید هر 4 جهت و مقدار دهی کنیم !

    مورد بعدی اسمش هست symmetric که ما میتونیم به صورت افقی و عمودی بهش Padding اعمال کنیم مثال زیر:

    padding: EdgeInsets.symmetric(horizontal: 30,vertical: 20)

    خب حالا من برای مثال میام padding رو به صورت All و با مقدار 30 اعمال میکنم نتیجه رو توی ادامه میبینیم.

    padding: EdgeInsets.all(30)

    خب تا اینجا مفهوم Padding و یادگرفتیم مفهوم بعدی اسمش هست Margin خب این Margin یعنی چی ؟ یعنی فاصله ویجت ما  از بیرون مثال زیر:

    margin: EdgeInsets.all(30)

    اگه دقت کنید Margin میاد از کنارها و خود ویجت فاصله میگیره

    من مقدار 30 رو که بهش دادم کل این ویجت container من از کنارها مقدار 30 رو گرفت که خب چون این پایین فعلا هیچ مقداری نیست

    دیده نمیشه و معلوم نمیشه اما توی تصویر بالا از سمت بالا و چپ روداره به خوبی نشون میده !

    این بود از آموزش ویجت Container در فلاتر

    نتیجه گیری : Padding شد فاصله از داخل و Margin میشه فاصله از بیرون دیدید که توی تصویر بالا این ویحت من  از همه جهت 30 تا فاصله گرفته که حتی میتونیم مثل Padding بهش متد Only رو پاس بدیم خب دوستان عزیز اینم بود از آشنایی با Container و Padding و Margin توی بخش های بعدی میبینمتون.

     

    5/5 - ( 6 امتیاز )

    دیدگاه شما نگاه ما رو عوض میکنه !

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    پشتیبانی آنلاین