عمل مؤشر لتتبع الخطوات في فلاتر | 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--;
});
}
},
)
),
),
);
}
}
فيديو الشرح
لمزيد من الشروحات والاكواد في فلاتر تستطيع مشاهدة كل هذا من خلال موقعنا الذي نشارك معكم بشكل مستمر الكثير من الاكواد والشروحات في فلاتر وغيرها من اللغات البرمجية المختلفة بشكل كبير لكي تتمكن من صناعة تطبيقات الاندرويد والايفون بسهوله.
- شرح كيفية الحصول على البيانات الاخبار من الapi بإستخدام DIO في Flutter
- شرح إنشاء تطبيق إخباري بأسخدام Apis في flutter بسهوله
- تصميم تطبيق BMI Calcoluter في Flutter مع الكود المصدر
- إضافة الDarkmode الى تطبيقك وحفظ التغيير في shared preferences بإستخدام Flutter
- كيفية حذف بيانات من Database بإستخدام Flutter عن طريق السحب
- حفظ بيانات الtoken و onBoarding في cacheHelper
