کار با دکمه ها در فلاتر انجام عمل کلیک کردن

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

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

ویجت های دکمه در فلاتر

دکمه ها یکی از ویجت های پایه ای فریمورک فلاتر هستند که برای تعامل با کاربر استفاده می شوند. دکمه ها به کاربران اجازه می دهند تا اقداماتی را در یک برنامه انجام دهند، مانند:

• ارسال اطلاعات
• باز کردن یک صفحه جدید
• انجام یک عملیات

دکمه ها در فلاتر از طریق رویداد کلیک (onPressed) مدیریت می شوند. هنگامی که کاربر روی یک دکمه کلیک می کند، رویداد کلیک فعال می شود و کدی که به رویداد کلیک اختصاص داده شده است اجرا می شود.

انتخاب نوع دکمه مناسب به نیازهای خاص برنامه شما بستگی دارد.

در اینجا چند نمونه از کاربرد دکمه ها در فلاتر آورده شده است:

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

دکمه ها در برنامه نویسی فلاتر انواع مختلفی دارند.

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

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

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

دکمه ویجت 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 به کلیک های ساده میتوانیم گوش دهیم و هر عملیاتی که نیاز است را اجرا کنیم. این ویجت امکان گوش دادن به کلیک های طولانی و یا دو کلیک را دارد.

ویژگی های اصلی ویجت InkWell عبارتند از:

• رویداد کلیک (onPressed): این رویداد هنگامی که کاربر روی ویجت کلیک می کند فعال می شود.
  
• رویداد نگه داشتن (onLongPress): این رویداد هنگامی که کاربر روی ویجت به مدت طولانی فشار می دهد فعال می شود.
  
• رویداد دوبار کلیک (onDoubleTap): این رویداد هنگامی که کاربر روی ویجت دوبار کلیک می کند فعال می شود.
  
• جلوه روان (splash): این جلوه هنگام کلیک روی ویجت ظاهر می شود و به کاربر می گوید که ویجت قابل تعامل است.

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