في Flutter ، يمكن استخدام العديد من المكونات لتصميم واجهات المستخدم ، بما في ذلك Stepper ، الذي يستخدم لتمثيل عملية تتكون من خطوات متعددة. يمكن استخدام Stepper في Flutter لإنشاء واجهات المستخدم التي تحتاج إلى تأكيد المستخدم للخطوات المختلفة في عملية معينة ، مثل إجراءات الدفع أو إنشاء حساب جديد.
في هذا المقال ، سنشرح Stepper ونوضح جميع خصائصه بالتفصيل ونوضح كيفية استخدامه في تصميم واجهات المستخدم.
ما هو Stepper في فلاتر؟
Stepper هو واحد من المكونات الأساسية في Flutter والتي تسمح بإنشاء عملية تتكون من خطوات متعددة. يمكن استخدام Stepper في Flutter لإنشاء واجهات المستخدم التي تحتاج إلى تأكيد المستخدم للخطوات المختلفة في عملية معينة.
“اقرأ أيضاً: شرح استخدام ويدجت Wrap في فلاتر“
خصائص Stepper
يمكن تحديد خصائص Stepper باستخدام العديد من الخصائص التي تحدد شكل ومظهر الخطوات والتحكم في تقدم العملية. يمكن استخدام العديد من الخصائص في Stepper في Flutter.
1- steps
تسمح هذه الخاصية بتحديد عدد الخطوات في Stepper.
Stepper( steps: [ Step(title: Text('Step 1'), content: Text('Content of Step 1')), Step(title: Text('Step 2'), content: Text('Content of Step 2')), Step(title: Text('Step 3'), content: Text('Content of Step 3')), ], )
“اقرأ أيضاً: شرح استخدام ويدجت Positioned في فلاتر“
2- currentStep
تسمح هذه الخاصية بتحديد الخطوة الحالية التي تمر بها عملية Stepper.
Stepper( currentStep: 1, steps: [ Step(title: Text('Step 1'), content: Text('Content of Step 1')), Step(title: Text('Step 2'), content: Text('Content of Step 2')), Step(title: Text('Step 3'), content: Text('Content of Step 3')), ], )
3- onStepTapped
تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عند النقر على خطوة معينة في Stepper.
Stepper( onStepTapped: (step) { // Do something when a step is tapped }, steps: [ Step(title: Text('Step 1'), content: Text('Content of Step 1')), Step(title: Text('Step 2'), content: Text('Content of Step 2')), Step(title: Text('Step 3'), content: Text('Content of Step 3')), ], )
4- onStepContinue
تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عند النقر على زر “التالي” في خطوة Stepper.
Stepper( onStepContinue: () { // Do something when the continue button is tapped }, steps: [ Step(title: Text('Step 1'), content: Text('Content of Step 1')), Step(title: Text('Step 2'), content: Text('Content of Step 2')), Step(title: Text('Step 3'), content: Text('Content of Step 3')), ], )
5- onStepCancel
تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عند النقر على زر “إلغاء” في خطوة Stepper.
Stepper( onStepCancel: () { // Do something when the cancel button is tapped }, steps: [ Step(title: Text('Step 1'), content: Text('Content of Step 1')), Step(title: Text('Step 2'), content: Text('Content of Step 2')), Step(title: Text('Step 3'), content: Text('Content of Step 3')), ], )
6- controlsBuilder
تسمح هذه الخاصية ببناء عناصر التحكم الخاصة بـ Stepper بشكل مخصص.
Stepper( controlsBuilder: (BuildContext context, ControlsDetails controls) { return Row( children: [ ElevatedButton( onPressed: controls.onStepContinue, child: Text('Continue'), ), SizedBox(width: 10.0), TextButton( onPressed: controls.onStepCancel, child: Text('Cancel'), ), ], ); }, steps: [ Step( title: Text('Step 1'), content: Text('Content of Step 1')), Step( title: Text('Step 2'), content: Text('Content of Step 2')), Step( title: Text('Step 3'), content: Text('Content of Step 3')), ], ),
“اقرأ أيضاً: شرح استخدام ويدجت PositionedTransition في فلاتر“
تستخدم Stepper في Flutter لإنشاء عملية تتكون من خطوات متعددة ، ويمكن تحديد خصائصه بالاعتماد على احتياجات تصميم واجهة المستخدم المحددة. يمكن تحديد عدد الخطوات باستخدام الخاصية steps
، وتحديد الخطوة الحالية باستخدام الخاصية currentStep
، وتحديد الإجراءات التي يجب تنفيذها عند النقر على الخطوة باستخدام الخاصية onStepTapped
، و onStepContinue
و onStepCancel
، والتحكم في عناصر التحكم المخصصة لـ Stepper باستخدام الخاصية controlsBuilder
. يمكن استخدامها بسهولة داخل أي واجهة مستخدم في Flutter.
نأمل أن يكون هذا الدليل الشامل لـ Stepper قد ساعدك في فهم كيفية استخدام هذا الويدجت في تصميم واجهات المستخدم في Flutter.