0

نگاهی عمیق به FloatingActionButton فلاتر(قسمت اول)

 

مقدمه ای بر FloatingActionButton

یک دکمه FloatingAction در طراحی متریال دکمه ای روی صفحه است که با عملکرد واضحی که معمولاً کاربر در آن صفحه خاص انجام می دهد گره خورده است. این دکمه در بالای محتوای صفحه شناور است و معمولاً در گوشه ای از صفحه قرار دارد

 

 

به عنوان مثال ، در Gmail ، صفحه اصلی دارای یک دکمه FloatingActionButon برای ساخت ایمیل است. هدف FAB باید کاری باشد که کاربر ممکن است مکرراً بخواهد یا باید انجام دهد.

 

انواع دکمه FloatingAction در Flutter

  1. FloatingActionButton.extended

1. FloatingActionButton

 

سازنده پیش فرض یک FAB دایره ای ساده با یک ویجت child در داخل آن ایجاد می کند. برای نشان دادن یک ویجت در داخل FAB ، یک روش onPressed لازم است تا به واکنش ها عکس العمل  نشان دهد و یک child (اجباری نیست).

 

 

این کد نسبتاً ساده است و بیشتر اوقات با پارامتر floatingActionButton ویجت scaffold استفاده می شود.

FloatingActionButton
(
 onPressed: () {}, child: Icon(Icons.add),
 )

2. FloatingActionButton.extended

FloatingActionButton.extendedیک FAB گسترده ای را ارائه می دهد ، معمولاً با یک ایکون و یک لیبل در داخل آن.

 

 

 

 

به جای پارامتر child ، اکنون پارامترهای label و icon داریم.

 

FloatingActionButton.extended(
onPressed: () {},
icon: Icon(Icons.save),
label: Text("Save"),
),

برخورد با رنگها در یک دکمه FloatingAction

FAB پارامترهای foregroundColor و backgroundColor را برای رنگ آمیزی عناصر داخل آن ارائه می دهد

foregroundColor child را درون FAB رنگ می کند.

 

FloatingActionButton(
 onPressed: () {},
 child: Icon(Icons.add,),
 foregroundColor: Colors.red,
),

 

 

 

BackgroundColor پس زمینه دکمه را رنگ می کند.

 

FloatingActionButton(
 onPressed: () {},
 child: Icon(Icons.add,),
 backgroundColor: Colors.pink,
),

 

 

توجه: رنگهای جداگانه عناصر ویژگی foregroundColor را لغو می کنند.

اگر نماد داخل دارای یک رنگ مشخص شده توسط کاربر و یک پیش زمینه رنگ باشد ، رنگ نماد رنگ پیش زمینه را لغو می کند.

FloatingActionButton(
 onPressed: () {},
 child: Icon(Icons.add, color: Colors.yellow,),
 foregroundColor: Colors.pink,
),

 

تغییر ظاهر دکمه FloatingAction

 

FAB چندین گزینه برای تغییر اندازه و تغییر شکل دکمه در اختیار ما قرار می دهد.

تغییر حالت به یک دکمه کوچک

در طراحی مواد ، FAB دارای دو اندازه است: پیش فرض و مینی. برای تغییر به اندازه کوچک ، mini را در سازنده روی true قرار دهید.

floatingActionButton: FloatingActionButton(
 onPressed: () {},
 child: Icon(Icons.add,),
 mini: true,
),

این باعث می شود اندازه دکمه کوچکتر شود.

 

تغییر شکل FAB

برای تغییر شکل دکمه ، پارامتر shape را در سازنده تنظیم می کنیم. مقدار پیش فرض شکل یک CircleBorder  است.

بیایید به جای دکمه گرد ، یک دکمه مربع درست کنیم.

floatingActionButton: FloatingActionButton(
 onPressed: () {},
 child: Icon(Icons.add,),
 shape: RoundedRectangleBorder(),
),

ایجاد منحنی در طراف مربع

 

floatingActionButton: FloatingActionButton(
 onPressed: () {},
 child: Icon(Icons.add,),
 shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
),

 

 

RoundedRectangleBorder و سایر کلاس های حاشیه ای نیز یک قسمت دیگر به نام side دارند که به ما امکان می دهد رنگ و عرض حاشیه را ویرایش کنیم.

floatingActionButton: FloatingActionButton(
 onPressed: () {},
 child: Icon(Icons.add,),
 shape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 4.0)),
),

 

 

ارسال دیدگاه

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