کار با آیکن ها و دکمه ها در فلاتر ( بخش 5 ) ❤️

در بخش قبل با stateless آشنا شدیم حالا توی این بخش میخوایم با دکمه ها و آیکن ها در فلاتر آشنا بشیم خب میخوام یه آیکن وسط صفحه قرار بدم مینویسم

icon (Icons.person)

   قرارش دادیم center خب این میاد و تصویر یه شخص و پرسون رو توی وسط صفحه نشون میده چون توی ویجت

حالا میخوام به این آیکن رنگ بدم توی خط بعد از کلمه کلیدی

Color : Colors.lightblue

و حالا اجرا میکنیم نتیجه مشابه تصویر زیر میشه

مورد بعدی هم که هست و میتونم ازش استفاده کنم سایزش هست توی خط بعد تایپ مکنیم

Size : 60.0

توی تصویر زیر نتیجه رو میبینید که آیکن من سایزش بزرگ تر شده

در ادامه من آیکن و کلا حذف میکنم و حالا میخوایم با دکمه کمی کار کنیم

برای این منظور از دکه Raisedbutton استفاده میکنیم برای این باتون یه Text قرار میدم واجرا میکنیم

الان برای تغییر رنگ دکمه مون توی خط پایین تایپ میکنیم و بعد اجرا میکنیم

colors: Colors.lightblue ;

میبینید که با استفاده از کد بالا رنگ دکمه تغییر کرد

دکمه دیگه ای که داریم اسمش هست Flatbutton من اسم دکمه قبلی و به Flatbutton تغییر میدم و اجرا میکنم

تنها تفاوتی که Flatbutton با Raisedbutton داره توی اون سایه و shodow هست که دارن flatbutton بدون سایه هست و raisedbutton یه سایه زیر دکمه قرار میده باقی ویژگی هاشون 99 درصد مشابه هم هست

الان من میخوام وقتی روش کلیک شد مثلا عبارت You clicked me رو برای من توی کنسول چاپ کنه

توی تصویر بالا میبینید که با استفاده از دستور print تونستیم عبارت و توی کنسول چاپ کنیم

اگه بخوایم برای Raisedbutton یه آیکن ست کنیم باید به صورت زیر عمل کنیم

خب حالا اگه دوباره بخوایم رنگ دکمه رو تغییر بدیم خیلی ساده از ویژگی Color استفاده میکنیم مثل تصویر زیر

یاد گرفتیم چه طوری به دکه ها مون رنگ بدیم و براشون آیکن ست کنیم و همینطور یه متن و Text بعهشون اختصاص بدیم

مدل بعدی دکمه ای که داریم اسمش هست Iconbutton و به صورت تصویر زیر ازش استفاده میکنیم

این مدل دکمه ها مورد استفادشون بیشتر توی اپ بار برای آیکن drawer و یا برای ساخت آیکن های Buttomnavigation کاربرد داره.