شارك المقالة

عمل مؤشر لتتبع الخطوات في فلاتر | flutter stepper

 


عمل مؤشر لتتبع الخطوات في فلاتر | flutter stepper

يستخدم الflutter stepper بشكل كبير في التطبيقات التي تتخصص في الشراء من الانترنت او حتى يمكنك استخدامه في بداية الصفحة مثل اتباع خطوات معينة داخل التطبيقات او قبول بعض السماحيات لكي يتمكن التطبيق من استخدام بعض الاوامر المعينه من جهازك والكثير من الاستخدام لهذة الخاصية ولهذا نشاركها معكم في مقالة اليوم مع الشرح وكيف تستطيع تشغيلها واستخدامها في تطبيقك .


شرح عمل stepper في الفلاتر

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


geecoders.dart

class GeeCoders extends StatefulWidget {
  const GeeCoders({Key? key}) : super(key: key);

  @override
  State<GeeCoders> createState() => _GeeCodersState();
}

class _GeeCodersState extends State<GeeCoders> {
  int _steps = 0 ;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.all(35.0),
        child: Center(
          child: Stepper(steps: [
            Step(title: Text('step 1'), content: Text('Geecoders')),
            Step(title: Text('step 2'), content: Text('Flutter')),
            Step(title: Text('step 3'), content: Text('Android Studio')),
          ],
          // orientation
          type:StepperType.vertical,
          onStepTapped: (int index){
            setState(() {
              _steps = index;
            });
          },
            currentStep: _steps,
            onStepContinue: (){
              if(_steps !=2) {
                setState(() {
                  _steps++;
                });
              }
            },
            onStepCancel: () {
            if (_steps == 0 ) {
              return;
            } else {
              setState(() {
                _steps--;
              });
            }
            },
          )
        ),
      ),
    );
  }
}

فيديو الشرح


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



شاهد أيضًا
مقالات ذات صلة
الحصول على جميع المنشورات من الfirebase مع معرفة عدد likes لكل منشور Flutter

الحصول على جميع المنشورات من الfirebase مع معرفة عدد likes لكل منشور في هذا الدرس…

تحديد عنصر او مجموعة عناصر مع animation باستخدام فلاتر

 تحديد عنصر او مجموعة عناصر مع animation باستخدام فلاترفي هذا المقال نشارك معكم واحده من…

شرح كيفية انشاء الجداول وانشاء اعمدة وصفوف وبيانات بداخلها ببرنامج Oracle SQL

  السلام عليكم ورحمة الله وبركاتة مرحبا بكم في اكواد sql حيث سوف نتعلم في…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع