کار با دکمه ها در فلاتر Flutter

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

ویجت هایی مختلفی در فلاتر وجود دارند که قابلیت کلیک شدن و پاسخ دادن به آن را دارند. تمام این ویجت ها در دسته بندی دکمه ها قرار میگیرند که از هرکدام در شرایط مختلف میتوانید استفاده کنید.

ویجت هایی مثل:

• ElevatedButton
• Floating Action Button
• TextButton
• IconButton
• Inkwell

در این مقاله به بررسی مهم ترین و پرکاربرد ترین دکمه ها در فریمورک Flutter میپردازیم.

ویجت ElevatedButton

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

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

پارامتر child که یک ویجت دریافت میکند و معمولا از ویجت متن یا آیکون برای نمایش داخل دکمه استفاده میکنیم.

پارامتر onPressed که یک متد میباشد و با هربار کلیک شدن دکمه این متد اجرا میشود و عملیات مورد انتظار را انجام میدهد.

ElevatedButton.icon(
              label: Text('My Button'),
              icon: Icon(Icons.web),
              onPressed: () {
                print('Pressed');
              },
            )

در کد بالا متن My Button را به همراه یک آیکون در صفحه نمایش میدهیم و در بخش onPressed متدی که طراحی کرده ایم با هربار کلیک روی دکمه یک متن پیام را در ترمینال چاپ میکند. شکل نهایی طراحی به صورت زیر خواهد بود:

پارامتر onLongPress همانند رویداد کلیک عمل میکند اما فقط به کلیک های طولانی پاسخ میدهد که میتوانید از آن نیز استفاده کنید.

برای تغییر ظاهر دکمه از کلاس ElevatedButton و متد سازنده styleFrom استفاده میکنیم.

ElevatedButton.icon(
              style: ElevatedButton.styleFrom(
                primary: Colors.green,

              ),)

برای تغییر رنگ پس زمینه از ویژگی primary استفاده میکنیم که در این مثال رنگ سبز را برای آن قرار داده ایم. باقی ویژگی های این کلاس با استایل های دیگر ویجت ها مشابه است. خروجی کار بصورت تصویر زیر است:

برای قرار دادن حاشیه در اطراف دکمه از ویژگی border میتوانید استفاده کنید.

style: ElevatedButton.styleFrom(
      primary: Colors.teal,
      onPrimary: Colors.white,
      side: BorderSide(color: Colors.red, width: 5),
    ),

برای تغییر شکل کلی نیز ویژگی shape این امکان را در اختیار شما میگذارد.

      shape: const BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),

دکمه Floating Action Button

دکمه دیگری که از آن در برنامه خود میتوانید استفاده کنید دکمه های شناور یا FAB هستند.

علت نامگذاری دکمه شناور به این علت است که با اسکرول کردن در صفحه این ویجت در جای خود ثابت میماند.

در فلاتر از این دکمه میتوانید در هر جایی از صفحه استفاده کنید. اما در زبان طراحی متریال دیزاین از این کامپوننت عموما در بخش پایین صفحه استفاده میکنند. به همین دلیل ویجت Scaffold دارای پارامتری با همین نام است و به شکل خودکار دکمه شناور را در قسمت انتهای صفحه جای میدهد.

Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          print("FAB clicked");
        },
        child: Icon(Icons.favorite),
      ))

در کد بالا از کلاس FloatingActionButton استفاده کرده ایم که به عنوان ویجت فرزند یک آیکون قرار داده ایم. با اجرا برنامه دکمه زیر را در قسمت پایین صفحه مشاهده میکنید.

برای تغییر رنگ پس زمینه دکمه از ویژگی backgroundColor میتوانید استفاده کنید.

نوع دیگری از دکمه های شناور در فلاتر وجود دارد که میتوانید همزمان از یک عنوان به همراه آیکون استفاده کنید. در این روش کافیست فقط در مثال قبلی از متد سازنده extended استفاده کنید.

FloatingActionButton.extended(
        backgroundColor: Colors.red,
        onPressed: (){
          print("FAB clicked");
        },
        label: Text('Like'),
        icon: Icon(Icons.favorite),
      )

در کد بالا برای نمایش عنوان از ویژگی label استفاده کردیم و برای نمایش آیکون هم از ویژگی icon باقی موارد در هر دو مثال یکسان است. خروجی کار به شکل زیر خواهد بود:

همانطور که مشاهده میکنید عنوان و آیکون در کنار یکدیگر قرار گرفته اند.

ویجت Inkwell

در خیلی از موارد نیاز داریم از ویجت هایی به غیر از دکمه ها برای پیاده سازی قابلیت کلیک شدن استفاده کنیم. برای مثال یک شکل طراحی کرده ایم و میخواهیم امکان کلیک شدن را داشته باشد. یا به یک ویجت Container نقش دکمه بدهیم.

در این حالت از ویجت Inkwell استفاده میکنیم که قابلیت کلیک شدن را به ویجت فرزند خود اعمال میکند.

 InkWell(
    child: Container(
      alignment: Alignment.center,
    width: 80.0,
    height: 80.0,
    color: Colors.yellow,
    child: Text('Click me..'),
    ),
       onTap: () {
         print('Pressed');
       }
         )

در کد بالا داخل ویجت Inkwell یک Container با اندازه 80*80 قرار دادیم و یک متن هم در مرکز آن ایجاد کردیم. با استفاده از ویژگی onTap به کلیک های ساده میتوانیم گوش دهیم و هر عملیاتی که نیاز است را اجرا کنیم. این ویجت امکان گوش دادن به کلیک های طولانی و یا دو کلیک را دارد.