عرض مربع لاختيار التاريخ في Flutter
في هذا المقال سوف نتعرف باذن الله تعالى على كيفية اضافة DatePicker في داخل flutter والتعامل مع الوقت والتاريخ , حيث تعد هذة الخطوه مهمه جدا في اغلب التطبيقات التي تحتاج الى جدوله ومن خلال هذا الدرس سوف نساعدكم على التعامل معها وكيفية اظهارها والحصول منها على الوقت وكيفية عرضه ايضا .
Flutter عبارة عن مجموعة أدوات لواجهة المستخدم من مقدمه من العملاق Google والتي تتيح لك إنشاء تطبيقات جذابة مبنية محليًا للجوال والويب وسطح المكتب والأجهزة المضمنة بقاعدة شفرة واحدة وهذا ما يميزها عن غيرها "- الرفرفة عبارة عن مجموعة من تطوير برامج مفتوحة المصدر (SDK) يتم صيانتها بشكل أساسي بواسطة تُستخدم Google لإنشاء تطبيقات عبر الأنظمة الأساسية لأنظمة Android و iOS و Linux و Mac و Windows والويب. يتيح Flutter للمطور إنشاء واجهة مستخدم مرنة وأنيقة للغاية مع السماح بإعادة استخدام تعريفات منطق العمل وواجهة المستخدم عبر العديد من المنصات. إنها مشابهة لأطر تطوير أخرى عبر الأنظمة الأساسية في العديد من الجوانب ولكن لديها بعض الاختلافات الرئيسية.
كل شيء بدءًا من تطبيق الجذر ذي المستوى الأعلى وصولاً إلى أصغر عناصر واجهة المستخدم لديك هو عنصر واجهة مستخدم في Flutter. يمكن إعادة استخدام عناصر واجهة المستخدم عدة مرات حسب الحاجة ، ويتم إضافة كل عنصر إلى شجرة عناصر واجهة المستخدم التي يتم استخدامها لإنتاج كل إطار من عرض التطبيق الخاص بك. تتكون غالبية الأدوات التي أنشأها مطور التطبيق من عناصر واجهة مستخدم أخرى ، واستراتيجية تكوين عنصر واجهة المستخدم هذه ، على غرار الطريقة التي تبني بها مواقع ويب React واجهة المستخدم الخاصة بها من المكونات ، تسمح بالمرونة والاتساق وإعادة استخدام الكود والأداء السريع.
بينما أستمر في مناقشة ميزات Flutter ، أتيت من العمل مع نماذج Xamarin.
إظهار DatePicker في Flutter
في هذا الكود قمنا بعمل تصميم بسيط جدا يحتوي على نص واسفلة زر وعند النقر على هذا الزر يتم تشغيل الmethode الخاص بعرض الDatePicker وهي التي باسم showdata بالاسفل وبها قمنا بتحديد الوقت الذي نريد ظهوره وايضا حددنا مدة الوقت اي ان اكبر تاريخ حاليا تستطيع الاختيار منه هو 2025 والقيمة التي نحصل عليها تخزن بداخل data ويتم استدعائها في النص الموجود بالاعلى .
الكود المستخدم
class Test extends StatefulWidget {
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
DateTime date = DateTime.now();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Test Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(date.toString()),
SizedBox(height: 10,),
MaterialButton(
onPressed: showData,
color: Colors.black54,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Text('Choose Date' , style: TextStyle(color: Colors.white , fontSize: 15)),
),
),
],
),
) ,
);
}
void showData(){
showDatePicker(context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2025),).then((value) {
setState(() {
date = value!;
});
});
}
}
لمزيد من الشروحات في تطوير تطبيقات الاندرويد و الايفون يمكنكم مشاهدة باقي المقالات على الموقع وتعلم مهارات جديدة تساعدك على انجاز العمل بشكل اسرع
- اضافة BottomSheet الى تطبيقك في Flutter بسهوله
- شرح استخدام Reusable Components في Flutter واهميته
- اضافة صور وملحقات خارجية الى Flutter والتعامل معها في التطبيق
- كيفية اضافة الوان مختلفة في Flutter وتحسين شكل التطبيق
