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

استفاده از چک باکس ها CheckBox و رادیوباتن Radio Button در فرم های ثبت نام و نظرسنجی متداول می باشد.

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

ویجت چک باکس CheckBox چیست؟

چک باکس ها یکی از عناصر رایج در رابط کاربری برنامه های موبایل هستند که به کاربران اجازه می دهند تا گزینه های مختلف را انتخاب یا عدم انتخاب کنند.

در فلاتر، دو نوع ویجت برای پیاده سازی چک باکس وجود دارد:

1. CheckBox: این ویجت یک چک باکس ساده را نمایش می دهد.
   
2. CheckBoxListTile: این ویجت علاوه بر چک باکس، شامل یک عنوان و زیرعنوان نیز می باشد.

در Radio Button ها کاربر فقط اجازه انتخاب یک گزینه و داره ولی در CheckBox کاربر هر تعداد گزینه که مایل بود میتواند انتخاب کند.

چرا از چک باکس در طراحی اپلیکیشن فلاتر استفاده کنیم؟

چک باکس ها یکی از عناصر رایج در رابط کاربری برنامه های موبایل هستند که به کاربران اجازه می دهند تا گزینه های مختلف را انتخاب یا عدم انتخاب کنند.

استفاده از چک باکس ها مزایای متعددی دارد که در ادامه به برخی از آنها اشاره می کنیم:

1. سهولت استفاده: چک باکس ها به کاربران اجازه می دهند تا به سرعت و به آسانی گزینه های مختلف را انتخاب کنند.

2. خوانایی: چک باکس ها به طور واضح نشان می دهند که چه گزینه هایی انتخاب شده اند و چه گزینه هایی انتخاب نشده اند.

5. قابلیت چندگانه: می توان از چند چک باکس در کنار هم برای انتخاب چند گزینه استفاده کرد.

چند نمونه از کاربردهای چک باکس ها:

• انتخاب چند گزینه: برای مثال، در یک فرم ثبت نام، می توان از چک باکس ها برای انتخاب علایق کاربر استفاده کرد.
  
• فیلتر کردن داده ها: برای مثال، در یک برنامه فروش، می توان از چک باکس ها برای فیلتر کردن محصولات بر اساس دسته بندی آنها استفاده کرد.
  
• فعال یا غیرفعال کردن ویژگی ها: برای مثال، در یک برنامه تنظیمات، می توان از چک باکس ها برای فعال یا غیرفعال کردن اعلان ها استفاده کرد.

نکاتی برای استفاده از چک باکس ها:

• از چک باکس ها برای انتخاب گزینه های متعدد استفاده کنید.
  
• از چک باکس ها برای گزینه هایی استفاده کنید که به طور واضح با یکدیگر مرتبط هستند.
  
• از چک باکس ها برای گزینه هایی استفاده کنید که نیاز به انتخاب سریع دارند.
  
• از چک باکس ها در کنار برچسب های واضح و گویا استفاده کنید.

آموزش ساخت Splash Screen

پیاده سازی ویجت CheckBox در فلاتر

برای راحتی من یک ویجت از نوع StateFul ایجاد می میکنم و دو مقدار boolean قرار میدهم که نشان دهنده وضعیت چک باکس های من می باشند.

همچنین دو متد هم تعریف میکنم که یک پارامتر boolean برای اپدیت کردن مقادیری که بالاتر گفتم میگیرد.

 var _second = false;

  void _Change1(bool value){
    setState(() {
_first = value;
      print('first: $value');
    });
  }

  void _Change2(bool value){
    setState(() {
_second = value;
      print('second: $value');
    });
  }

حالا در صفحه خودم دو چک باکس قرار میدهم از نوع CheckBoxListTile

Column(

        children: <Widget>[
          CheckboxListTile(value: _first, onChanged: _Change1,title: Text('my title'),),
          CheckboxListTile(value: _second, onChanged: _Change2, activeColor: Colors.black87,title: Icon(Icons.add),),

        ],
      ),

کد بالا یک چک باکس ساده را نمایش می دهد. با کلیک بر روی چک باکس، مقدار _second به true یا false تغییر می کند. برای متغیر دیگر هم به همین شکل میباشد

در کد بالا همچنین با استفاده از activeColor میتونید رنگ چک باکس خودتون و تغییر بدید.

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