شرح استخدام ويدجت ElevatedButton في فلاتر

إن ويدجت ElevatedButton هي واحدة من المكونات المهمة في Flutter، والتي تستخدم على نطاق واسع لإنشاء أزرار في التطبيقات. تتضمن ElevatedButton مجموعة كبيرة من الخصائص التي تمكنك من تحديد مظهر الزر وتفاصيل الوظيفة التي يقوم بها. سوف يساعد هذا الدليل الشامل في فهم كل خاصية في ElevatedButton مع الأمثلة العملية.

خصائص ويدجت ElevatedButton في فلاتر

خاصية child:

تستخدم هذة الخاصية لتحديد النص الذي يظهر على الزر. يتم تحديد القيمة الافتراضية لـ child على Text(‘Button’).

ElevatedButton(
  onPressed: () {},
  child: Text('Click me!'), // النص الذي يظهر على الزر
),

“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“

الأيقونة (icon):

يمكنك استخدام خاصية الأيقونة لإضافة أيقونة إلى الزر.

ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.add), // الأيقونة المستخدمة
  label: Text('Add'), // النص الذي يظهر على الزر
),

الحالة (onPressed):

تستخدم خاصية الحالة لتحديد الوظيفة التي يقوم بها الزر عند النقر عليه. يتم تحديد القيمة الافتراضية لـ onPressed على null، ولكن يجب تحديد قيمة لها لتجنب ظهور خطأ.

ElevatedButton(
  onPressed: () {
    // الوظيفة التي يقوم بها الزر عند النقر عليه
    print('Button clicked!');
  },
  child: Text('Click me!'),
),

الحالة المعطلة (onPressed):

يمكنك استخدام خاصية الحالة المعطلة لتعطيل الزر ومنع النقر عليه.

ElevatedButton(
  onPressed: null, // الزر معطل ولا يمكن النقر عليه
  child: Text('Disabled button'),
),

“اقرأ أيضاً: شرح استخدام AnimatedPositioned في فلاتر“

اللون (style):

تستخدم خاصية اللون لتحديد لون الزر وشكله. يتم تحديد القيمة الافتراضية لـ style على ElevatedButton.styleFrom(primary: Colors.blue).

ElevatedButton(
  onPressed: () {},
  child: Text('Click me!'),
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // لون الخلفية
    onPrimary: Colors.white, // لون النص
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10), // شكل الزر
    ),
  ),
),

العرض والارتفاع (width, height):

تستخدم خاصيتا العرض والارتفاع لتحديد حجم الزر.

ElevatedButton(
  onPressed: () {},
  child: Text('Click me!'),
  style: ElevatedButton.styleFrom(
    minimumSize: Size(100, 50), // الحجم الأدنى
    fixedSize: Size(200, 100), // الحجم الثابت
  ),
),

خاصية autofocus:

تستخدم هذه الخاصية لتحديد ما إذا كان يجب أن يتم التركيز على الزر تلقائيًا عند تحميل الصفحة.

ElevatedButton(
  child: Text('Click me'),
  autofocus: true,
  onPressed: () {},
)

خاصية clipBehavior:

تستخدم هذه الخاصية لتحديد ما إذا كان يجب أن يتم قص الزر إذا كان يتجاوز حدود العنصر الأب أم لا.

ElevatedButton(
  child: Text('Click me'),
  clipBehavior: Clip.none, // Do not clip button
  onPressed: () {},
)

خاصية focusNode:

تستخدم هذه الخاصية لتحديد عنصر التركيز الخاص بالزر، ويمكن استخدامها لتمكين التحكم في عنصر التركيز من خلال الرمز.

FocusNode myFocusNode = FocusNode();

ElevatedButton(
  child: Text('Click me'),
  focusNode: myFocusNode,
  onPressed: () {},
)

خاصية textStyle:

تستخدم هذه الخاصية لتحديد نمط النص المستخدم في الزر. يمكن تخصيص الخط والحجم ولون النص.

ElevatedButton(
  child: Text('Click me'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    textStyle: TextStyle(
      fontSize: 20,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ),
)

“اقرأ أيضاً: شرح استخدام ويدجت Visibility في فلاتر“

إذا كنت تريد إنشاء أزرار في تطبيق Flutter الخاص بك، فإن ElevatedButton هي الخيار الأمثل لذلك. توفر ElevatedButton العديد من الخصائص التي تمكنك من تحديد مظهر الزر وتفاصيل الوظيفة التي يقوم بها. يمكنك استخدام خاصية child لتحديد النص الذي يظهر على الزر وخاصية icon لإضافة أيقونة إلى الزر. كما يمكنك استخدام خاصية onPressed لتحديد الوظيفة التي يقوم بها الزر عند النقر عليه، وخاصية style لتحديد لون الزر وشكله، وخاصيتي width و height لتحديد حجم الزر.