شرح إستخدام الStatefulWidget في Flutter
يوجد نوعين في التطوير في بيئة العمل Flutter الاولى وهي StatefulWidget والاخرى StateLessWidget حيث ان الاولى اذا كان يوجد كود تريد تنفيذة في التصميم والاخرى اذا كان التصميم لا يحتوى على اي من الاكشن التي تتم وفي هذا المقال سوف نقوم بعمل معكم counter وسوف نشاهد الفرق , اولا وبكل بساطة عليك تصميم الشكل الذي ترغب به وهنا قمت بعمل التصميم عباره عن زر للزيادة و اخر للناقص وبينهم نص وهذا النص عباره عن القيمة .
هل تريد تطوير تطبيقات الجوال سواء كانت تعمل بنظام اندرويد او اي او اس بكود واحد , قديما كان هذا الامر صعب جدا ولكن مع تطور التكنولوجيا وظهور لغات برمجه مختلفه وتقنيات مختلفة اصبح هذا الامر طبيعي وسهل يوجد كثير من اللغات حاليا اصبحت. تطور لنا تطبيقات بكود واحد ليس فقط بتقنية فلاتر ولكن يوجد لغات اخرى ولكن هل سالت نفسك لماذا يتجه الاغلب الى flutter عكس غيرها رغم انه يوجد لغه اخرى تقوم بنفس الوظيفه قريبا. الامر بكل بساطه وهو ان تقنية فلاتر من تطوير العملاق جوجل وكما نعلم ان شركة google دائما تسعى الى تطوير لغات برمجه قويه جدا. و تسهل على المطورين العمل من خلال الاضافات والتحديثات التي يقومون بها باستمرار في المشاريع الخاصه بهم سواء في لغات البرمجه او في اي شيء اخر. ايضا تقنية فلاتر لغه بسيطه جدا وهي تعمل بلغه تسمى دارت.
كود عمل عداد في فلاتر
قم بعمل StatefulWidget واسفل CounterState قم بعمل متغير من نوع int ويبدء من القيمة 1 , وايضا نقوم بعمل initState للمتغيرات وبداخل كل عملية نضع setState والعملية وهي تكون عباره عن قيمة الcounter سواء كانت للزيادة ++ او للنقصان -- وبالنسبة للنص سوف نجعله $counter لكي يظهر قيمة الرقم بدلا من القيمة الثابته ويكون متغير .
Counter.dart
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int counter = 1;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: TextButton(onPressed: () {
setState(() {
counter--;
});
}, child: Text('minus')),
),
Text(
'$counter',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: TextButton(onPressed: () {
setState(() {
counter++;
});
}, child: Text('Plus')),
),
],
),
),
);
}
}
في النهايه نتمنى ان تكون المقالة نالت على رضاكم ولمزيد من المقالات في البرمجة يمكنكم تصفح الموقع لمشاهدة باقي المقالات .
- كيفية عمل listview في flutter بسهوله | Flutter Widget of ListView
- شرح عمل ModelClass و Constructor لبيانات الlistView في Flutter
- كيفية اضافة الوان مختلفة في Flutter وتحسين شكل التطبيق
- تصميم واجهة تطبيق messanger facebook بإستخدام flutter
- تصميم واجهة Login في Flutter مع شرح كيفية التصميم
