إضافة search في NewsApp والتعامل معه في Flutter
في هذا الدرس والذي يعد اخر درس من دروس فلاتر سوف نقوم معكم باضافة مربع البحث وكيفية التعامل معه وكيف تحصل على المعلومات من الapi بسهوله وكل هذا سوف يكون في هذة المقالة لذلك حاول ان تتابع المقالة جيدا وتركز في كل ما نقدمه .
Flutter عبارة عن مجموعة أدوات لواجهة المستخدم من مقدمه من العملاق Google والتي تتيح لك إنشاء تطبيقات جذابة مبنية محليًا للجوال والويب وسطح المكتب والأجهزة المضمنة بقاعدة شفرة واحدة وهذا ما يميزها عن غيرها "- الرفرفة عبارة عن مجموعة من تطوير برامج مفتوحة المصدر (SDK) يتم صيانتها بشكل أساسي بواسطة تُستخدم Google لإنشاء تطبيقات عبر الأنظمة الأساسية لأنظمة Android و iOS و Linux و Mac و Windows والويب. يتيح Flutter للمطور إنشاء واجهة مستخدم مرنة وأنيقة للغاية مع السماح بإعادة استخدام تعريفات منطق العمل وواجهة المستخدم عبر العديد من المنصات. إنها مشابهة لأطر تطوير أخرى عبر الأنظمة الأساسية في العديد من الجوانب ولكن لديها بعض الاختلافات الرئيسية.
كل شيء بدءًا من تطبيق الجذر ذي المستوى الأعلى وصولاً إلى أصغر عناصر واجهة المستخدم لديك هو عنصر واجهة مستخدم في Flutter. يمكن إعادة استخدام عناصر واجهة المستخدم عدة مرات حسب الحاجة ، ويتم إضافة كل عنصر إلى شجرة عناصر واجهة المستخدم التي يتم استخدامها لإنتاج كل إطار من عرض التطبيق الخاص بك. تتكون غالبية الأدوات التي أنشأها مطور التطبيق من عناصر واجهة مستخدم أخرى ، واستراتيجية تكوين عنصر واجهة المستخدم هذه ، على غرار الطريقة التي تبني بها مواقع ويب React واجهة المستخدم الخاصة بها من المكونات ، تسمح بالمرونة والاتساق وإعادة استخدام الكود والأداء السريع.
بينما أستمر في مناقشة ميزات Flutter ، أتيت من العمل مع نماذج Xamarin.
بيانات الSearch داخل NewsStates
اولا عليك بأن تقوم بعمل بالتوجه الى ملف NewsStates ومن هذا الملف قم بوضع Flag لحالة البحث والنجاح والفشل اذا تمت عملية البحث لي تكون قادر على اكتشاف المشكلة سواء نجاح ام فشل العملية .
NewsStates.class
class NewsGetSearchSuccessState extends NewsStates {}
class NewsLoadingSearchState extends NewsStates {}
class NewsGetSearchErrorState extends NewsStates {
final String erroe ;
NewsGetSearchErrorState(this.erroe);
كيفية البحث داخل الاخبار في News Api في Flutter
الان انتقل الى ملف الكيوبت وهذا الملف الذي يتم بداخله كتابة الاكواد وهنا سوف نقوم بعمل قائمة جديدة فارغه وبعدها نقوم بعمل methode جديدة لحالة البحث اذا تمت عملية سوف يكون في حالة انتظار البيانات واذا وصلت البيانات بشكل سليم سوف يعرض البيانات من الarticles واذا فشلت فسوف يخرج لك سالة بان العملية فشلت .
Cubit.class
List <dynamic> search = [];
void getSearch(String value) {
emit(NewsLoadingSearchState());
DioHelper.getData(
url: 'v2/everything',
query:
{
'q':'$value',
'apiKey':'#######',
},
).then((value) {
search = value.data['articles'];
emit(NewsGetSearchSuccessState());
}).catchError((error){
print(error.toString());
emit(NewsGetScienceErrorState(error));
});
}
عمل انتقال بين الصفحات في componant و إخفاء الProgressIndicator في حالة وجود بيانات
الان سوف نقوم بعمل تعديل بسيط وهو اننا سوف نضيف حالة البحث داخل الbuildArtical وتكون حالتها false وسوف نقوم بعمل اختبار اذا كانت العملية true سوف يخرج مؤشر للتحميل ويختفي بمجرد ظهور البيانات واذا لم يكن هناك بيانات لن يظهر اي شيئ , وبعدها قمنا بعمل انتقال لكي نستطيع التنقل بين الصفحات بسهوله دون الحاجه لكتابة الكود مره اخرى ولذلك قمنا بوضعها بداخل الcomponant ايضا .
componant.dart
Widget buildArtical(list , context , {isSearch = false})=> Conditional.single(
context: context,
conditionBuilder: (context)=> list.length > 0,
widgetBuilder: (context)=> ListView.separated(
// يقوم بإلغاء العلامه الزرقاء عند الصعود الى الاعلى او النزول للاسفل ويجعلها بشكل مطاطي
physics: BouncingScrollPhysics(
),
itemBuilder: (context , index) => buildNews(list[index] , context),
separatorBuilder: (context , index) => buildLine(),
itemCount: 10 ),
fallbackBuilder: (context)=> isSearch ? Container() : Center(child: CircularProgressIndicator())
);
void navigateTo(context , widget)=>
Navigator.push(context, MaterialPageRoute(
builder: (context)=> widget));
كيفية الانتقال من صفحة NewsLayout الى Search
الان في الصفحة الرئيسية وبكل بساطة عند النقر على علامة مربع البحث سوف نمرر له الصفحة التي نريد الانتقال اليها وسوف ينقلنا اليها مباشرة دون الحاجه لكتابة كود الانتقال بشكل كامل وهذا المميز في كتابة الاكواد التي قد تسخدمها اكثر من مره في ملف componant
إنشاء صفحة للبحث واضافة مربع بحث بداخلها
الان سوف نقوم بإنشاء صفحة البحث وسوف يكون اسمها SearchScreen وتحتوي هذة الصفحة ببساطه على مربع للبحث بداخلها وهذا المربع تم تصتمية ايضا مسبقا بداخل ملف componant ويستقبل هذا المربع نص وعند تغيير الاحرف او كتابة اي حرف يعرض البيانات واذا كانت البيانات فارغه فسوف يخرج رسالة نصية .
SearchScreen.class
class SearchScreen extends StatelessWidget {
var searchController = TextEditingController();
@override
Widget build(BuildContext context) {
return BlocConsumer<NewsCubit , NewsStates>(
listener: (context, state){},
builder: (context, state){
var list = NewsCubit.get(context).search;
return Scaffold(
appBar: AppBar(
title: Text('Search'),
centerTitle: true,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: defaultFormField(
controller: searchController,
type: TextInputType.text,
onChange: (String value){
NewsCubit.get(context).getSearch(value);
},
validate: (String? value){
if (value!.isEmpty) {
return 'search must be empty ..';
}
return null;
},
label: 'Search',
prefix: Icons.search,
),
),
Expanded(child: buildArtical(list, context , isSearch: true)),
],
),
);
},
);
}
}
تشغيل BlocProvider واظهار بيانات الاخبار
هنا اخر خطوة وهيا تشغيل الBlocProvider الذي نريده ان يعمل عند بدء تشغيل التطبيق وعرض المحتويات التي بداخله وهنا قمنا بتشغيل البيزنس و الرياضه والعلوم وايضا وضعية الchangeMode وهو الوضع الليلي او النهاري نريد ان يعمل عند بدء تشغيل التطبيق .
