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

في 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.