شارك المقالة

عمل مؤشر لتتبع الخطوات في فلاتر | 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--;
              });
            }
            },
          )
        ),
      ),
    );
  }
}

فيديو الشرح


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



شاهد أيضًا
مقالات ذات صلة
كيفية عرض RecyclerView بشكل افقي HORIZONTAL في اندرويد ستوديو

  كيفية عرض RecyclerView بشكل HORIZONTAL في اندرويد ستوديوكما نعلم انه لا يخلوا تطبيق من…

شرح كيفية عمل recyclerview داخل الاندرويد ستوديو بسهولة تامة

  متابعي موقعنا الاعزاء مرحبا بكم في مقالة جديدة في برنامج android studio حيث يتم…

تصميم صفحة dashboard panel تعمل على بشكل responsive لتعمل على مختلف الاجهزة

تصميم صفحة dashboard panel تعمل على بشكل responsive لتعمل على مختلف الاجهزةتعتبر لوحات الإدارة سريعة…

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

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