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

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

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

1- الخاصية onPressed

تستخدم هذه الخاصية لتحديد الإجراء الذي يتم تنفيذه عند النقر على الزر.

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا
  },
  child: Text('Click me'),
);

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

2- الخاصية child

تستخدم هذه الخاصية لتحديد النص الذي يظهر على الزر.

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا
  },
  child: Text('Click me'),
);

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

3- الخاصية style

تستخدم هذه الخاصية لتحديد تنسيق الزر.

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا
  },
  style: OutlinedButton.styleFrom(
    backgroundColor: Colors.blue,
    primary: Colors.white,
  ),
  child: Text('Click me'),
);

4- الخاصية autofocus

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

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا
  },
  autofocus: true,
  child: Text('Click me'),
);

5- الخاصية clipBehavior

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

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا
  },
  clipBehavior: Clip.antiAlias,
  child: Text('Click me'),
);

6- الخاصية focusNode

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

FocusNode focusNode = FocusNode();

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا
  },
  focusNode: focusNode,
  child: Text('Click me'),
);

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

7- الخاصية onLongPress

تستخدم هذه الخاصية لتحديد الإجراء الذي يتم تنفيذه عند الضغط على الزر لفترة طويلة.

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا
  },
  onLongPress: () {
    // أدخل إجراء الضغط الطويل هنا
  },
  child: Text('Click me'),
);

8- الخاصية borderSide

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

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا  },
  style: OutlinedButton.styleFrom(
    side: BorderSide(width: 2, color: Colors.red),
  ),
  child: Text('Click me'),
);

9- الخاصية shape

تستخدم هذه الخاصية لتحديد شكل الزر.

OutlinedButton(
  onPressed: () {
    // أدخل إجراء النقر هنا
  },
  style: OutlinedButton.styleFrom(
    shape: StadiumBorder(),
  ),
  child: Text('Click me'),
);

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

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