شارك المقالة

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

فيديو الشرح


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



شاهد أيضًا
مقالات ذات صلة
شرح نموذج DBSCAN في تعليم الاله وكيف يستخدم في لغة البايثون

شرح نموذج DBSCAN في تعليم الاله وكيف يستخدم في لغة البايثون نموذج DBSCAN من النماذج…

اندرويد ستوديو : كيفية عمل تمرير للصور بشكل احترافي عن طريق اضافة ViewPager2 – برنامج android studio

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

كيفية إضافة الرسوم المتحركة إلى ListView في Flutter : دليل شامل

شرح كيفية تنفيذ Animation على ListView داخل Flutterأهمية الانميشن animation ListView Flutter في تصميم تطبيقات…

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

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