عنصر ElevatedButton في تطبيقات فلاتر

“استخدام وتخصيص زر ElevatedButton في تطبيقات Flutter”

مقدمة

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

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

ما عو عنصر الزر البارز في تصميم واجهات تطبيقات فلاتر ؟

ElevatedButton in flutter

ElevatedButton في Flutter هو عبارة عن عنصر واجهة مستخدم يمثل زرًا مرتفعًا بينما يتم تنفيذه في التطبيق.

يتميز ElevatedButton بأنه يظهر بتصميم ثلاثي الأبعاد يوحي بالارتفاع عن سطح الشاشة، مما يجعله يبرز ويمكن تمييزه بسهولة.

ما هي مميزات وخصائص الزر البارز في تطبيقات فلاتر؟

 ميزات وخصائص يمكن تخصيصها لـ ElevatedButton في Flutter، من بينها:

text: النص الذي يتم عرضه على زر الارتفاع.
onPressed: دالة تُشغل عندما يتم النقر على الزر.
style: يتيح لك تخصيص الأسلوب الخاص بالزر مثل الألوان والشكل وحجم النص والهامش والحواف.
onLongPress: دالة تُشغل عندما يتم الضغط بشكل طويل على الزر.
الاستخدام الأساسي لـ ElevatedButton في Flutter يشمل تعريف النص الذي سيتم عرضه على الزر وتحديد الدالة التي يجب تشغيلها عند النقر على الزر. على سبيل المثال:

ElevatedButton(
onPressed: () {
// إجراء الذي يجب تنفيذه عند النقر على الزر
print('Button pressed');
},
child: Text('Click Me'), // النص المعروض على الزر
)

يتم تنفيذ الشيفرة السابقة عند النقر على الزر، حيث يتم طباعة “Button pressed” في وحدة تحكم التطبيق.

يمكنك أيضًا تخصيص الزر بشكل أكبر باستخدام خصائص الأسلوب مثل style لتغيير الألوان والأشكال وحجم النص وغيرها لتناسب تصميم التطبيق الخاص بك.

خطوة بخطوة كيف نستخدم الزر البار في تصميم تطبيقات فلاتر ؟

ElevatedButton in flutter

هناك خطوات بسيطة لاستخدام ElevatedButton في تطبيق Flutter:

1. إضافة الاعتمادية (Dependency) (غالما تكون مضافة تلقئيا )
يمكن أن نتأكد من أننا قمنا  بإضافة اعتمادية Flutter في ملف pubspec.. يمكنك إضافة الاعتمادية كما يلي:

flutter:
sdk: flutter

2. استيراد المكتبة (Import Library)
استورد مكتبة Flutter اللازمة في ملف الكود الخاص بك. يتم ذلك بإضافة السطر التالي في بداية ملف الكود:

import 'package:flutter/material.dart';

3. استخدام ElevatedButton
استخدم ElevatedButton في واجهة التطبيق الخاصة بنا . يمكننا وضعه في أي مكان نرتريده داخل Widget tree الخاص بالتطبيق.

هناك طريقتين لفعل ذلك:

استخدام ElevatedButton كعنصر مباشر داخل Tree:
قم بتضمين ElevatedButton كعنصر مباشر داخل tree الخاص بنا .

على سبيل المثال:

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ElevatedButton Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// الإجراء الذي سيتم تنفيذه عند النقر على الزر
print('Button Pressed');
},
child: Text('Click Me'), // النص المعروض على الزر
),
),
);
}

استخدام ElevatedButton كجزء من الـ Widget الآخر:
يمكننا أيضًا استخدام ElevatedButton كجزء من Widget آخر مثل Column, Row, أو ListView.

على سبيل المثال:

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ElevatedButton Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Press the button:',
),
ElevatedButton(
onPressed: () {
// الإجراء الذي سيتم تنفيذه عند النقر على الزر
print('Button Pressed');
},
child: Text('Click Me'), // النص المعروض على الزر
),
],
),
),
);
}

4. تشغيل التطبيق
نقم بتشغيل التطبيق في محاكي أو جهاز حقيقي باستخدام الأمر flutter run لرؤية ElevatedButton والتفاعل معه.

هذه هي الخطوات الأساسية لاستخدام ElevatedButton في تطبيق Flutter الخاص بنا .

نستطيع تخصيص المظهر والسلوك باستخدام الخصائص المختلفة التي تقدمها ElevatedButton حسب احتياجاتنا.

الكود النهائي

كود نهائي يستخدم ElevatedButton في تطبيق Flutter:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ElevatedButton Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ElevatedButton Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Press the button:',
),
ElevatedButton(
onPressed: () {
// الإجراء الذي سيتم تنفيذه عند النقر على الزر
print('Button Pressed');
},
child: Text('Click Me'), // النص المعروض على الزر
),
],
),
),
);
}
}

نقم بنسخ الكود أعلاه إلى ملف الكود الخاص بتطبيق Flutter الخاص بنا

نشغيل التطبيق باستخدام flutter run، وسنرى  شاشة تطبيق تحتوي على عنصر ElevatedButton يعرض نص “Click Me”. عند النقر على الزر، ستظهر رسالة “Button Pressed” في وحدة تحكم التطبيق.

شرح  الكود في أسطر منفصلة

 هنا شرح لكل جزء من الكود بشكل مبسط

import ‘package:flutter/material.dart’;: هذا السطر يستورد مكتبة المواد الخاصة بـ Flutter التي تحتوي على مجموعة كبيرة من العناصر والأدوات لبناء واجهات المستخدم.

void main() { runApp(MyApp()); }: هذا السطر يُشغل التطبيق، ويُمرر إلى runApp() مرة واحدة MyApp()، والذي يمثل واجهة التطبيق الجذرية.

class MyApp extends StatelessWidget { … }: هذا هو تعريف لفئة التطبيق الرئيسية. ترث MyApp من StatelessWidget لأنها لا تحتوي على حالة يتغير فيها العرض.

MaterialApp: هو عبارة عن واجهة تطبيق Flutter. يتضمن عنوان التطبيق والموضوع الرئيسي والشاشة الرئيسية.

Scaffold: يوفر هيكلًا لتطبيق Flutter. يحتوي على AppBar والجسم (body) الذي يمكن أن يحتوي على العناصر الرئيسية.

AppBar: هو شريط التطبيق الذي يحتوي على عنوان التطبيق.

Center: يمركز أي عنصر طفيف الوزن (child) داخل واجهة المستخدم.

Column: يقوم بترتيب العناصر الفرعية عمودياً.

Text: يعرض نصًا على الشاشة.

ElevatedButton: هو عنصر واجهة مستخدم يمثل زرًا مرتفعًا يتم تنفيذه في التطبيق عند النقر عليه.

onPressed: هو الدالة التي يجب تنفيذها عند النقر على الزر.

child: هو العنصر الفرعي الذي يتم عرضه داخل الزر، في هذه الحالة هو عنصر Text يعرض “Click Me”.

هذه هي أبرز الأجزاء في الكود ووظائفها في تطبيق Flutter.

شجرة العناصر لهذا التطبيق

MaterialApp
└─ Scaffold
   ├─ AppBar
   │  └─ Text (عنوان التطبيق)
   └─ Center
      └─ Column
         ├─ Text (نص التعليمة)
         └─ ElevatedButton
            └─ Text (نص الزر)

تتألف شجرة العناصر من MaterialApp كعنصر رئيسي يحتوي على Scaffold، والذي يتضمن AppBar وCenter. داخل Center، يتم وضع Column لترتيب العناصر بشكل عمودي، وفي هذا الـ Column يوجد Text لعرض التعليمة و ElevatedButton الذي يتضمن Text يعرض نص الزر.

تشغيل التطبيق :

 خصائص ومكونات ووظائف الElevatedButton in flutter

سنسرد قائمة بالخصائص والمكونات والوظائف الرئيسية لعنصر ElevatedButton في Flutter:

المكونات (Components):
Text: يعرض النص داخل الزر.
الخصائص (Properties):
onPressed: دالة يتم استدعائها عندما يتم النقر على الزر.
style: يتيح لتخصيص مظهر الزر مثل الألوان والحجم والهامش والحواف.
onLongPress: دالة يتم استدعاؤها عندما يتم الضغط على الزر بشكل طويل.
clipBehavior: يحدد سلوك الكتابة عندما يكون لديك تجاوز للمحتوى داخل الزر.
الوظائف (Functions):
onPressed Function: تعريف دالة يتم استدعاؤها عند النقر على الزر لتنفيذ الإجراء المطلوب.
onLongPress Function: تعريف دالة يتم استدعاؤها عند الضغط بشكل طويل على الزر لتنفيذ الإجراء المطلوب.
توفر هذه المكونات والخصائص والوظائف مرونة كبيرة لتخصيص وتعديل سلوك ومظهر ElevatedButton في تطبيق Flutter الخاص بك وفقًا لاحتياجات تصميمك ومتطلبات واجهة المستخدم.

تطبيق 2 عن خصائص ومكونات ElevatedButton

طبعًا، سنقوم بإنشاء تطبيق متقدم يستخدم كل خصائص ومكونات ElevatedButton في Flutter. سنقوم بإنشاء تطبيق يحتوي على زر ElevatedButton يمكن تخصيصه بشكل كامل بواسطة المستخدم. هنا الكود:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Advanced ElevatedButton Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
Color _buttonColor = Colors.blue;
double _buttonWidth = 200.0;
double _buttonHeight = 50.0;
double _buttonFontSize = 16.0;

void _changeButtonColor() {
setState(() {
_buttonColor = Colors.red;
});
}

void _changeButtonSize() {
setState(() {
_buttonWidth = 250.0;
_buttonHeight = 70.0;
});
}

void _changeButtonTextSize() {
setState(() {
_buttonFontSize = 20.0;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Advanced ElevatedButton Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: _changeButtonColor,
style: ElevatedButton.styleFrom(
primary: _buttonColor,
minimumSize: Size(_buttonWidth, _buttonHeight),
textStyle: TextStyle(fontSize: _buttonFontSize),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(color: Colors.black, width: 2.0),
),
elevation: 5.0,
padding: EdgeInsets.all(10.0),
),
child: Text('Customizable Button'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _changeButtonSize,
child: Text('Change Button Size'),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: _changeButtonTextSize,
child: Text('Change Text Size'),
),
],
),
),
);
}
}

هذا التطبيق يحتوي على زر ElevatedButton وثلاثة زرق مجاورة له لتغيير خصائص الزر.

يمكننا تخصيص لون الزر، وحجمه، وحجم النص، وشكل الزر، وحتى حجم الظل الخاص به.

يمكننا تجربة تغيير هذه الخصائص لاختبار قدرات ElevatedButton في Flutter.

شرح الكود :

هاكم  شرح الكود بشكل مفصل مع توضيح لكل سطر:

Import Statement:
نقوم بتضمين مكتبة المواد من Flutter لاستخدام عناصر ومكونات واجهة المستخدم.

import 'package:flutter/material.dart';

Main Function:
تقوم بتشغيل التطبيق بواسطة دالة runApp() وتمرير MyApp() كواجهة المستخدم الجذرية للتطبيق.

void main() {
runApp(MyApp());
}

MyApp Class:
هذه الفئة تمثل تطبيق Flutter الجذري. ترث من StatelessWidget لأنها لا تحتوي على حالة داخلية. في هذه الفئة، نقوم بتعريف مظهر التطبيق وتحديد صفحته الرئيسية.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Advanced ElevatedButton Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

MyHomePage Class:
هذه الفئة تمثل صفحة البداية الرئيسية في التطبيق. ترث من StatefulWidget لأنها تحتوي على حالة داخلية. في هذه الفئة، نقوم بتعريف الواجهة الرئيسية التي تحتوي على عنصر Scaffold الذي يحتوي على AppBar و ElevatedButton.

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

State Variables:
نقوم بتعريف متغيرات الحالة التي سيتم استخدامها لتخصيص خصائص الزر.

Color _buttonColor = Colors.blue;
double _buttonWidth = 200.0;
double _buttonHeight = 50.0;
double _buttonFontSize = 16.0;

Change Button Color Function:
هذه الدالة تقوم بتغيير لون الزر عند الضغط عليه.

void _changeButtonColor() {
setState(() {
_buttonColor = Colors.red;
});
}

Build Method:
في هذه الدالة، نقوم ببناء وتخصيص واجهة المستخدم باستخدام عنصر Scaffold الذي يحتوي على AppBar و ElevatedButton وغيرها من العناصر.

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Advanced ElevatedButton Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: _changeButtonColor,
style: ElevatedButton.styleFrom(
primary: _buttonColor,
minimumSize: Size(_buttonWidth, _buttonHeight),
textStyle: TextStyle(fontSize: _buttonFontSize),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(color: Colors.black, width: 2.0),
),
elevation: 5.0,
padding: EdgeInsets.all(10.0),
),
child: Text('Customizable Button'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _changeButtonSize,
child: Text('Change Button Size'),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: _changeButtonTextSize,
child: Text('Change Text Size'),
),
],
),
),
);
}

هذه شجرة العناصر للتطبيق:

MaterialApp
└─ MyApp
   └─ MyHomePage
      └─ Scaffold
         ├─ AppBar
         │  └─ Text (عنوان التطبيق)
         └─ Center
            └─ Column
               ├─ ElevatedButton (Customizable Button)
               │  └─ Text (نص الزر)
               ├─ SizedBox (مسافة)
               ├─ ElevatedButton (Change Button Size)
               │  └─ Text (نص الزر)
               └─ SizedBox (مسافة)
                  └─ ElevatedButton (Change Text Size)
                     └─ Text (نص الزر)

هذه الشجرة توضح التنظيم الهرمي لعناصر التطبيق، بدءًا من MaterialApp كواجهة المستخدم الجذرية، ومرورًا بالفئات MyApp و MyHomePage، وصولاً إلى Scaffold الذي يحتوي على AppBar و ElevatedButton وSizedBox في التطبيق.

تشغيل التطبيق:

تطبيق 3انشيء تطبيق عن خصائص ومكونات ElevatedButton

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

هاكم  الكود:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom ElevatedButton Creator',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ButtonCreatorPage(),
);
}
}

class ButtonCreatorPage extends StatefulWidget {
@override
_ButtonCreatorPageState createState() => _ButtonCreatorPageState();
}

class _ButtonCreatorPageState extends State<ButtonCreatorPage> {
Color _buttonColor = Colors.blue;
double _buttonWidth = 200.0;
double _buttonHeight = 50.0;
double _buttonFontSize = 16.0;
String _buttonText = 'Custom Button';

void _updateButtonColor(Color color) {
setState(() {
_buttonColor = color;
});
}

void _updateButtonSize(double width, double height) {
setState(() {
_buttonWidth = width;
_buttonHeight = height;
});
}

void _updateButtonText(String text) {
setState(() {
_buttonText = text;
});
}

void _updateButtonFontSize(double fontSize) {
setState(() {
_buttonFontSize = fontSize;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom ElevatedButton Creator'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: _buttonColor,
minimumSize: Size(_buttonWidth, _buttonHeight),
textStyle: TextStyle(fontSize: _buttonFontSize),
),
child: Text(_buttonText),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Button Color:'),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => _updateButtonColor(Colors.blue),
style: ElevatedButton.styleFrom(primary: Colors.blue),
child: Text('Blue'),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => _updateButtonColor(Colors.red),
style: ElevatedButton.styleFrom(primary: Colors.red),
child: Text('Red'),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Button Size:'),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => _updateButtonSize(200.0, 50.0),
child: Text('Normal'),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => _updateButtonSize(250.0, 70.0),
child: Text('Large'),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Button Text:'),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => _updateButtonText('Custom Button'),
child: Text('Default'),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => _updateButtonText('Click Me'),
child: Text('Click Me'),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Button Font Size:'),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => _updateButtonFontSize(16.0),
child: Text('Small'),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => _updateButtonFontSize(20.0),
child: Text('Large'),
),
],
),
],
),
),
);
}
}

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

الخصائص المستخدمة في هذا التطبيق

في هذا التطبيق، تم استخدام العديد من الخصائص لتخصيص زر ElevatedButton. إليك قائمة بالخصائص المستخدمة:

primary: تستخدم لتحديد لون الخلفية الرئيسي للزر.
minimumSize: تستخدم لتحديد الحد الأدنى لحجم الزر.
textStyle: تستخدم لتحديد نمط النص داخل الزر بما في ذلك حجم الخط.
onPressed: تستخدم لتحديد الدالة التي سيتم استدعاؤها عند النقر على الزر.
child: تستخدم لتحديد العنصر الفرعي المعروض داخل الزر، في هذا التطبيق تم استخدام Text.
style: تستخدم لتخصيص المظهر العام للزر بما في ذلك اللون والحجم والهامش والحواف وغيرها.
shape: تستخدم لتحديد شكل الزر، في هذا التطبيق تم استخدام RoundedRectangleBorder.
elevation: تستخدم لتحديد حجم الظل الذي يعرض عند تمييز الزر.
padding: تستخدم لتحديد التباعد الداخلي للزر.
SizedBox: تستخدم لإضافة مسافات بين العناصر داخل Column وRow لتنظيم تخطيط الواجهة.
هذه الخصائص تمكن المستخدم من تخصيص زر ElevatedButton بشكل كامل وفقًا لاحتياجات تصميم التطبيق.

شرح الكود في أسطر منفصلة ومعنونة

هاكم شرح الكود بالتفصيل مع كل سطر معنون:

Import Statement:
نقوم بتضمين مكتبة المواد من Flutter لاستخدام عناصر ومكونات واجهة المستخدم.

import 'package:flutter/material.dart';

Main Function:
تقوم بتشغيل التطبيق بواسطة دالة runApp() وتمرير MyApp() كواجهة المستخدم الجذرية للتطبيق.

void main() {
runApp(MyApp());
}

MyApp Class:
هذه الفئة تمثل تطبيق Flutter الجذري. ترث من StatelessWidget لأنها لا تحتوي على حالة داخلية. في هذه الفئة، نقوم بتعريف مظهر التطبيق وتحديد صفحته الرئيسية.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom ElevatedButton Creator',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ButtonCreatorPage(),
);
}
}

ButtonCreatorPage Class:
هذه الفئة تمثل صفحة البداية الرئيسية في التطبيق. ترث من StatefulWidget لأنها تحتوي على حالة داخلية. في هذه الفئة، نقوم بتعريف الواجهة الرئيسية التي تحتوي على عناصر التحكم بزر ElevatedButton.

class ButtonCreatorPage extends StatefulWidget {
@override
_ButtonCreatorPageState createState() => _ButtonCreatorPageState();
}

State Variables:
نقوم بتعريف متغيرات الحالة التي سيتم استخدامها لتخصيص خصائص الزر.

Color _buttonColor = Colors.blue;
double _buttonWidth = 200.0;
double _buttonHeight = 50.0;
double _buttonFontSize = 16.0;
String _buttonText = 'Custom Button';

Update Button Color Function:
هذه الدالة تقوم بتغيير لون الزر عند الضغط على أحد الأزرار المحددة.

void _updateButtonColor(Color color) {
setState(() {
_buttonColor = color;
});
}

Build Method:
في هذه الدالة، نقوم ببناء وتخصيص واجهة المستخدم باستخدام عنصر Scaffold الذي يحتوي على AppBar و ElevatedButton وعناصر التحكم الأخرى.

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom ElevatedButton Creator'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: _buttonColor,
minimumSize: Size(_buttonWidth, _buttonHeight),
textStyle: TextStyle(fontSize: _buttonFontSize),
),
child: Text(_buttonText),
),
// أزرار التحكم بخصائص الزر
],
),
),
);
}

هذه شجر عناصر التطبيق:

MaterialApp
└─ MyApp
   └─ ButtonCreatorPage
      └─ Scaffold
         ├─ AppBar
         │  └─ Text (عنوان التطبيق)
         └─ Center
            └─ Column
               └─ ElevatedButton
                  └─ Text (نص الزر)

هذه الشجرة تمثل التنظيم الهرمي لعناصر التطبيق، بدءًا من MaterialApp كواجهة المستخدم الجذرية، ومرورًا بالفئات MyApp و ButtonCreatorPage، وصولاً إلى Scaffold الذي يحتوي على AppBar و ElevatedButton في التطبيق.

تشغيل التطبيق :نشغل التطبيق على محاكي جزنا أو على موقع مفسر فلاتر على الانترنت 

والنتيجة :

تطبيق 4:عن  ElevatedButton

بالطبع! دعني أوضح لك كيفية إنشاء مشروع Flutter متكامل باستخدام ElevatedButton. سنقوم بإنشاء تطبيق بسيط يحتوي على زر يقوم بعرض رسالة عند النقر عليه. يمكننا تخصيص الزر بتغيير لونه ونصه. لنبدأ:

إنشاء مشروع Flutter جديد:
قم بفتح محرر النصوص الخاص بك وأدخل الأمر التالي في الطرفية:

flutter create elevated_button_app

حيث elevated_button_app هو اسم المشروع الذي يمكن تغييره حسب تفضيلاتك.

نفتح المشروع في محرر النصوص:
بعد إنشاء المشروع، افتح المجلد الخاص به في محرر النصوص المفضل لديك.

تحرير ملف lib/main.dart:
نقم بتعديل الملف lib/main.dart واستبدل الكود الموجود بالكود التالي:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ElevatedButton Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ElevatedButton Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('ElevatedButton Clicked'),
content: Text('You clicked the ElevatedButton.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
),
);
},
child: Text('Click Me'),
),
],
),
),
);
}
}

تشغيل التطبيق:
الآن، قم بتشغيل التطبيق على محاكي الهاتف الافتراضي أو جهازك الفعلي باستخدام الأمر التالي في الطرفية:

flutter run

ستظهر نافذة التطبيق مع زر “Click Me”. عند النقر على الزر، سيتم عرض رسالة تأكيد بأنك قمت بالنقر على الزر المرتفع.

هذا هو تطبيقك الأول باستخدام ElevatedButton في Flutter. يمكنك الآن استكشاف المزيد من الإمكانيات والتعديلات، مثل تخصيص لون الزر أو نصه، لتتعلم المزيد عن كيفية استخدام هذا العنصر في تطبيقاتك.

شجرة العناصر لتطبيق الزر المرتفع تكون كالتالي:

MaterialApp
└─ MyApp
   └─ MyHomePage
      └─ Scaffold
         ├─ AppBar
         │  └─ Text (عنوان التطبيق)
         └─ Center
            └─ Column
               └─ ElevatedButton
                  └─ Text (نص الزر)

تتكون الشجرة من عناصر التطبيق المختلفة، مع التركيب الهرمي الذي يمثل تنظيم العناصر داخل بعضها البعض.

اختبار  عن ElevatedButton:

1-ما هي وظيفة ElevatedButton في Flutter؟

أ) عرض عنصر زر مرتفع على واجهة المستخدم.
ب) عرض عنصر زر منخفض على واجهة المستخدم.
ج) عرض عنصر زر مرتفع ومنخفض على واجهة المستخدم.

2-ما الخصائص التي يمكن تخصيصها في ElevatedButton؟

أ) اللون فقط.
ب) اللون وحجم الزر فقط.
ج) اللون وحجم الزر ونص الزر وشكل الزر وحجم الظل والهامش وغيرها.

3-كيف يتم تحديد العمل الذي يتم تنفيذه عند النقر على ElevatedButton؟

أ) باستخدام خاصية onClick.
ب) باستخدام خاصية onPressed.
ج) باستخدام خاصية onTap.

4-ما هي الأداة المستخدمة في Flutter لإنشاء تطبيقات الهواتف المحمولة؟

أ) Flutter SDK.
ب) Dart Language.
ج) Android Studio.

5-هل يمكن استخدام ElevatedButton داخل Column في Flutter؟

أ) نعم.
ب) لا.

6-ما هي الخاصية التي تستخدم لتحديد نص الزر في ElevatedButton؟

أ) text.
ب) child.
ج) label.
بالتوفيق!

7-ما هو الفرق بين ElevatedButton و TextButton في Flutter؟

أ) ElevatedButton يعرض زرًا بشكل مرتفع بينما TextButton يعرض زرًا بشكل منخفض.
ب) ElevatedButton يستخدم للأزرار ذات الأهمية العالية بينما TextButton يستخدم للأزرار ذات الأهمية المتوسطة.
ج) لا يوجد فرق بينهما.

8-ما هو الفرق بين ElevatedButton و OutlinedButton في Flutter؟

أ) ElevatedButton يعرض زرًا بشكل مرتفع بينما OutlinedButton يعرض زرًا بشكل مخطط.
ب) ElevatedButton يعرض زرًا بشكل مرتفع بينما OutlinedButton يعرض زرًا بشكل مسطح.
ج) لا يوجد فرق بينهما.

9-كيف يمكن تخصيص لون الزر في ElevatedButton؟

أ) باستخدام خاصية color.
ب) باستخدام خاصية backgroundColor.
ج) باستخدام خاصية primaryColor.

10-ما هو الفرق بين onPressed و onTap في ElevatedButton؟

أ) لا فرق بينهما.
ب) onPressed يتم استخدامه للأزرار التي تعمل بشكل مرتفع بينما onTap يتم استخدامه للأزرار التي تعمل بشكل منخفض.
ج) onPressed يتم استخدامه للأزرار التي تعمل بشكل منخفض بينما onTap يتم استخدامه للأزرار التي تعمل بشكل مرتفع.

11-كيف يمكن تخصيص حجم الزر في ElevatedButton؟

أ) باستخدام خاصية size.
ب) باستخدام خاصية width و height.
ج) باستخدام خاصية minimumSize.

12-ما هي الأداة المستخدمة في Flutter لتخطيط العناصر بشكل عمودي؟

أ) Row.
ب) Stack.
ج) Column.

الاجابات 

أ) ElevatedButton يعرض زرًا بشكل مرتفع بينما TextButton يعرض زرًا بشكل منخفض.

ب) ElevatedButton يعرض زرًا بشكل مرتفع بينما OutlinedButton يعرض زرًا بشكل مخطط.

أ) باستخدام خاصية backgroundColor.

أ) onPressed يتم استخدامه للأزرار التي تعمل بشكل مرتفع بينما onTap يتم استخدامه للأزرار التي تعمل بشكل منخفض.

ج) باستخدام خاصية minimumSize.

ج) Column.

ب) ElevatedButton يعرض زرًا بشكل مرتفع بينما OutlinedButton يعرض زرًا بشكل مخطط.

ب) ElevatedButton يعرض زرًا بشكل مرتفع بينما OutlinedButton يعرض زرًا بشكل مسطح.

ب) باستخدام خاصية backgroundColor.

ب) onPressed يتم استخدامه للأزرار التي تعمل بشكل مرتفع بينما onTap يتم استخدامه للأزرار التي تعمل بشكل منخفض.

ج) باستخدام خاصية minimumSize.

ج) Column.