Fetch data from the Rest API with Search Data Using BLoC Pattern Flutter

في البداية دعونا نعرف ماهو ال Bloc هو اختصار ل Business Logic Component   وهو عبارة عن نمط من انماط البرمجة التفاعلية مثل MVC, MVVM, MVP يعتمد على Reactive Programming للتعامل مع تدفق البيانات للتطبيق .، والهدف منه هو هيكلة  و فصل مكونات التطبيق  [واجهة المستحدم UI, قاعدة البيانات Data, النموذج او النمط البرمجي Bloc] الى عدة اجزاء منطقية  . قد ينظر البعض ان تقسيم وفصل مكونات التطبيق الى اجزاء امر معقد , لاكن بالمقابل يجعل اداء التطبيق اكثر سرعة وقابلية لتطويره.

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

في هذا المقال ستتعلم كيفية بناء تطبيق فلاتر لجلب البيانات من الانترنت وعرضها على الشاشة مع اضافة ميزة البحث, المواضيع التي سنتطرق اليها : 

1. - انشاء ملف main.dart.
2. - انشاء كلاس ال Bloc.
3. - جلب البيانات من الانترنت بواسطة حزمة ال http.
4. - انشاء طلب للبيانات من الانترنت.
5. انشاء كلاس ال Model.
6. تحويل بيانات json  الى Dart.
7. - انشاء كلاس ال Model.
8. - تحويل بيانات json الى قائمة.
9. - اضافة اكواد البحث.
10. استدعاء خاصية fetch data  داخل initState.
11. - تصميم واجهة التطبيق.
12. - عرض البيانات على الشاشة.

ملفات التطبيق:

1- انشاء ملف main.dart:

قم ب انشاء تطبيق فلاتر جديد ثم انتقل الى ملف main.dart  وقم بحذف الكود السابق ثم الصق هذا الكود.

import 'package:flutter/material.dart'; import 'package:search_app/screens/searchScreen.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.amber, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: Search(), ); } }

2- انشاء كلاس ال Bloc:

قم ب انشاء مجلد ب اسم bloc وانشاء داخلة ملف ب بنفس الاسم , ثم الصق هذا الكود ; يتضمن هذا الملف كلاس من نوع abstract وهو الكلاس الرئيسي لل Bloc والغرض من استخدامة انه يغنيك عن تكرار الاكواد في الكلاسات الفرعية لل Bloc ويحافظ  على بقى الكود بشكل نظيف وصحيح. حيث يضمن أن جميع الكلاسات الفرعية تمتثل لنفس  الخصائص والطرق في الكلاس الرئيسي.

abstract class Bloc { void dispose(); }

3- جلب البيانات من الانترنت بواسطة حزمة ال http:

انتقل الى ملف pubspec.yaml  ثم اضف حزمة ال http والهدف منها تسهيل طريقة جلب البيانات من الإنترنت.

http: ^0.12.2

4- انشاء طلب للبيانات من الانترنت:

يتم استخدام خاصية ال  http.get() لجلب بيانات json  من  REST API Url ثم تعيد الطلب على شكل استجابة (Response) والتي تحتوي على البيانات.

Future<void> fetchUsers() async { final url = 'https://randomuser.me/api/?results=100'; http.Response response = await http.get(url);

5-انشاء كلاس ال Model :

يتضمن كلاس UserModel تعريف متغيرات بيانات json التي تم طلبها من الانترنت , كذلك قمنا ب استخدام خاصية ال () factory.fromJson  لتسهيل انشاء متغيرات خاصة ببيانات json.

class UserModel { final String gender; final String title; final String first; final String last; final String city; final String state; final String country; final String postcode; final String picture; final String phone; const UserModel({ this.title, this.city, this.country, this.first, this.gender, this.last, this.phone, this.picture, this.postcode, this.state, }); factory UserModel.fromJson(Map<String, dynamic> json) { return UserModel( gender: json['gender'] as String, title: json['name']['title'] as String, first: json['name']['first'] as String, last: json['name']['last'] as String, city: json['city'] as String, state: json['state'] as String, country: json['country'] as String, postcode: json['postcode'] as String, picture: json['picture']['large'] as String, phone: json['phone'] as String, ); } }

8-تحويل بيانات json الى قائمة :

يتم استخدام if الشرطية من اجل تحقيق اتصال جيد مع بين الكود و الانترنت , 

يتم تحويل response body الى JSON Map بواسطة استيراد مكتبة ال dart:convert , كذلك يتم تحويل map json  الى قائمة بواسطة fromJson() factory method.

if (response.statusCode == 200) { var body = jsonDecode(response.body); final Iterable list = body["results"]; totalUsers = list.map((model) => UserModel.fromJson(model)).toList(); userBloc.userController.sink.add(totalUsers); } }

9-اضافة اكواد البحث :

نقوم بتعريف UserModel , ثم نضيف هذا  الكود الى الكلاس واستخدام خاصية ال Controller لتحكم في تدفق البيانات عند البحث .

List<UserModel> totalUsers = []; void search(String searchQuery) { List<UserModel> searchResult = []; userBloc.userController.sink.add(null); if (searchQuery.isEmpty) { userBloc.userController.sink.add(totalUsers); return; } totalUsers.forEach((user) { if (user.first.toLowerCase().contains(searchQuery.toLowerCase()) || user.last.toLowerCase().contains(searchQuery.toLowerCase())) { searchResult.add(user); } }); userBloc.userController.sink.add(searchResult); }

10-استدعاء خاصية fetch data  داخل initState : 

يتم استخدام خاصية البحث ك تابعة لل initState بغرض اعادة تحميل ال  API  الى response وتحديث البيانات في الواجهه في حال حصل تغيرللبيانات.

void initState() { fetchUsers(); super.initState(); }

11- تصميم واجهة التطبيق :

يتم بناء تصميم لواجهة التطبيق مثل اضافة TextField خاصة ب عملية البحث واضافة كود امر جلب البيانات عند البحث.

@override Widget build(BuildContext context) { return GestureDetector( onTap: () => FocusScope.of(context).unfocus(), child: Scaffold( backgroundColor: Colors.white, body: Column( children: <Widget>[ SizedBox(height: 20), Container( padding: const EdgeInsets.all(16.0), child: TextField( onChanged: (text) => search(text), decoration: InputDecoration( suffixIcon: Icon(Icons.search), hintText: 'Search', contentPadding: EdgeInsets.symmetric(horizontal: 30, vertical: 20), border: OutlineInputBorder( borderSide: BorderSide(width: 3.1, color: Colors.red), borderRadius: BorderRadius.circular(30), ), ), ), ), Container( height: 50, child: Container( decoration: BoxDecoration( border: Border( bottom: BorderSide(color: Colors.green), ), ), alignment: Alignment.center, margin: EdgeInsets.symmetric(horizontal: 10), padding: EdgeInsets.symmetric(horizontal: 10), child: Text( 'Users', style: TextStyle(fontSize: 16), ), ), ), Expanded(child: usersWidget()) ], ), ), ); } }

12- عرض البيانات على الشاشة :

يتم استخدام خاصية ال StreamBuilder تعمل على تدفق البيانات وعرضها على الشاشة , واضافة متغيرات البيانات في ListView.builder بغرض ترتيب عرضها على الشاشة , اضافة if الشرطية لتعامل مع الاخطاء.

Widget usersWidget() { return StreamBuilder( stream: userBloc.userController.stream, builder: (BuildContext buildContext, AsyncSnapshot<List<UserModel>> snapshot) { if (snapshot == null) { return CircularProgressIndicator(); } return snapshot.connectionState == ConnectionState.waiting ? Center( child: CircularProgressIndicator(), ) : ListView.builder( itemCount: snapshot.data.length, itemBuilder: (BuildContext context, int index) { return Card( child: ListTile( leading: Image.network('${snapshot.data[index].picture}'), title: Text( '${snapshot.data[index].first} ${snapshot.data[index].last}', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 18), textAlign: TextAlign.center, ), subtitle: Text('${snapshot.data[index].phone}'), trailing: Text('${snapshot.data[index].gender}'), ), ); }, ); }, ); }

مخرجات التطبيق : 

مقالات متعلقة :

Search Bar with JSON Data and navigator to Details Screen Flutter

https://brhomapps.blogspot.com/2021/11/search-bar-with-json-data-and-navigator.html

Search Bar with Json Data Flutter App

https://youtu.be/YOzCwuau-Xo

كيفية إنشاء تطبيق Wallpaper من الصفر  باستخدام واجهة برمجة تطبيقات flutter وموقع pixels بشكل (مجاني)

https://brhomapps.blogspot.com/2021/10/wallpaper-flutter-pixels.html

في حال واجهتك اي مشكلة لاتتردد في كتابة في تعليق ^_^ 

GooD LooK FoR All