ویجت RaisedButton

تعداد بازدید ها : 1,473 بازدید
 ویجت RaisedButton

ویجت RaisedButton یک کادر مستطیل که قدری روی زمینه زیر خود ایجاد برجستگی کرده است ، به عنوان دکمه روی صفحه نمایش می دهد . کاربرد این دکمه در داخل فرم های شلوغ با متن زیاد به جهت ایجاد تمایز و جلب توجه کاربر است . حداقل اندازه این دکمه ۸۸ در ۳۶ است که می توان توسط خصوصیت ButtonTheme آن را تغییر داد . اگر مایل نیستید از یک دکمه استفاده نمایید و ترجیح می‌هید ویجت های سازنده UI شما قادر به دریافت رویدادهای کاربر باشند می توانید از ویجت GestureDetector و یا کلاس InkWell استفاده نمایید .

قطعه کد زیر نمونه ای از پیاده سازی این ویجت را نمایش می دهد :

  1. Widget build(BuildContext context) {
  2. return Center(
  3. child: Column(
  4. mainAxisSize: MainAxisSize.min,
  5. children: <Widget>[
  6. const RaisedButton(
  7. onPressed: null,
  8. child: Text(
  9. 'Disabled Button',
  10. style: TextStyle(fontSize: 20)
  11. ),
  12. ),
  13. const SizedBox(height: 30),
  14. RaisedButton(
  15. onPressed: () {},
  16. child: const Text(
  17. 'Enabled Button',
  18. style: TextStyle(fontSize: 20)
  19. ),
  20. ),
  21. const SizedBox(height: 30),
  22. RaisedButton(
  23. onPressed: () {},
  24. textColor: Colors.white,
  25. padding: const EdgeInsets.all(0.0),
  26. child: Container(
  27. decoration: const BoxDecoration(
  28. gradient: LinearGradient(
  29. colors: <Color>[
  30. Color(0xFF0D47A1),
  31. Color(0xFF1976D2),
  32. Color(0xFF42A5F5),
  33. ],
  34. ),
  35. ),
  36. padding: const EdgeInsets.all(10.0),
  37. child: const Text(
  38. 'Gradient Button',
  39. style: TextStyle(fontSize: 20)
  40. ),
  41. ),
  42. ),
  43. ],
  44. ),
  45. );
  46. }
Widget build(BuildContext context) {
  return Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const RaisedButton(
          onPressed: null,
          child: Text(
            'Disabled Button',
            style: TextStyle(fontSize: 20)
          ),
        ),
        const SizedBox(height: 30),
        RaisedButton(
          onPressed: () {},
          child: const Text(
            'Enabled Button',
            style: TextStyle(fontSize: 20)
          ),
        ),
        const SizedBox(height: 30),
        RaisedButton(
          onPressed: () {},
          textColor: Colors.white,
          padding: const EdgeInsets.all(0.0),
          child: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: <Color>[
                  Color(0xFF0D47A1),
                  Color(0xFF1976D2),
                  Color(0xFF42A5F5),
                ],
              ),
            ),
            padding: const EdgeInsets.all(10.0),
            child: const Text(
              'Gradient Button',
              style: TextStyle(fontSize: 20)
            ),
          ),
        ),
      ],
    ),
  );
}

همانطور که در خط ۷ کد فوق قابل مشاهده است ، چون به خصوصیت onPressed ویجت RaisedButton مقدار دهی نشده است ، این دکمه به صورت غیر فعال (Disabled ) نمایش داده شده است . همچنین اگر مایلید رنگ پس زمینه دکمه را به حالت شیب رنگ (gradient) نمایش دهید می توانید از یک ویجت Container و خصوصیت decoration آن استفاده نمایید (مشابه خط ۲۷ کد فوق)

می خوانم   ویجت BottomNavigationBar

تصویر زیر خروجی کد فوق را نمایش می دهد :

raised_buttonجهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .

امیدوارم این مطلب برای شما مفید باشد .

محمدمجتبی جوارشکیان

محمدمجتبی جوارشکیان

من محمدمجتبی جوارشکیان ، کارشناس IT و فعال اجتماعی هستم و در حوزه معماری ، طراحی ، تحلیل گری ، مدلسازی و توسعه ی محیط های نرم افزاری فعالیت دارم. همانند سایر کارشناسان IT در تلاشم تا دنیا جای زیباتری برای زندگی باشد. بسیار خوشحال می شوم من را از انتقادات ، پیشنهادات و نظرات خود مطلع فرمایید. آدرس ایمیل : mjfakhr@yahoo.com

ارسال یک پاسخ

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

4 + 5 =