Search Bar with JSON Data and navigator to Details Screen Flutter

وصف المشروع:

في هذا المقال سوف نشرح كيفية انشاء تطبيق فلاتر يمكنك من خلالة جلب البيانات من الانترنت بتنسيق JSON بواسطة خدمة API وباستخدام تلك البيانات ، نقوم بإنشاء Flutter ListView. لإنشاء ListView من فئة ListView.builder. وبالنقر فوق عنصر ListView ، يفتح نافذة جديدة ويعرض جميع تفاصيل المستخدم على تلك الشاشة. كما يمكنك باستخدام شريط البحث تصفية ListView وفقًا لاسم المستخدم الاول و الاخير والمسمى الوظيفي . بالإضافة إلى ذلك ، من خلال إنشاء هذا المشروع ، يمكنك الحصول على فكرة حول كيفية استخدام عنصر واجهة المستخدم ListTitle و Hero و Lottie Animations و Url Launcher.

Search Bar with JSON Data and navigator to Details Screen Flutter

سوف نقسم شرح المقالة الى عدة اقسام كالاتي:

انشاء تطبيق فلاتر جديد
انشاء ملفات مجلد lib لتطبيقك
اضافة حزم التطبيق
اعداد بيانات json
انشاء كلاس لبيانات json
جلب البيانات من الانترنت API
شرح اكواد اتطبيق

إنشاء مشروع Flutter جديد :

قم بإنشاء مشروع Flutter جديد واذا كنت مبتدا شاهد شرح انشاء تطبيق فلاتر جديد من هـــــنا [الفيديو]

او اتبع الخطوات التالية:

افتح برنامج اندرويد استوديو
اضغط على New flutter project .
حدد تطبيق Flutter في النافذة التي تظهر بعد ذلك ثم اضغط Next .
سمي تطبيقك الاسم الذي تريده . قد تضطر أيضًا إلى تحديد المسار إلى SDK اذا لم يكن محدد .
أدخل اسم الحزمة com.your name.app name .
اختر اللغة البرمجية لتطبيق [ kotlin - Swift ]فقط.
اختر منصة التطبيق [ Android - IOS ] فقط , ثم اضغط Finish ,وانتظر جتى يقوم التطبيق بانهاء اعداد التطبيق.
قم باعداد مكونات التطبيق.
شغل التطبيق على محاكي الاندرويد او على هاتفك الخاص,للتاكيد ان كل شي جاهز.
انتقل لملف build.gradle في ملف android وتاكد من رقم targetSdkVersion ثم قم بضبط ال sdk بالضغط على File في اعلى الشاشة لليمين في تطبيق الاندرويد استوديو ثم انتقل الى Project Structure ستظهر لك شاشة Project Setting قم ب اختيار قسم Project ثم عدل اصدار ال Project sdk نفس رقم targetSdkVersion , ثم انتقل الى قسم Model في يمين الشاشة ستظهر شاشة جديدة قم بالانتقل الى Dependencies في الخيارات بالاعلى ثم عدل Mpdle sdk الى نفس رقم targetSdkVersion , ثم انتقل الى قسم Problems اسفل الشاشة Project Setting وقم بحل المشاكل اذا ظهرت بالضغط على fix جوار كل مشكلة.

انشاء ملفات مجلد lib لتطبيقك :

الآن داخل هذا المشروع ، قم بإنشاء بنية مجلد ال lib كما في الصورة:

مجلد data يتضمن ملف data_model والذي يحتوي على نموذج للبيانات json التي سنستخدمها في التطبيق.

مجلد domain: يتضمن ملف repository والذي يحتوي على الاكواد التي تُستخدم للاتصال واسترداد البيانات من خدمة API.

مجلد presentation: يتضمن مجلد اخر components ويحتوي هذا المجلد على ملفين فرعيين هما :- ملف ال user_tile والذي يتضمن اكواد تصميم القوائم الرئيسية وملف loading_widget والذي يتضمن اكواد صفحة التحميل في حالة لم يحصل استجابة لجلب البيانات.

مجلد screens: يحتوي هذا المجلد على ملفين هما :- ملف user_details_page والذي يتضمن اكواد تصميم تفاصيل الشاشة الداخلية بعد الضغط على اي قائمة , و ملف ال home_page الذي يتضمن اكواد الشاشة الرئيسية لتطبيق.

مجلد assets: يحتوي هذا المجلد على ملف loading_image والذي يحتوي على بيانات json لصورة الرسوم المتحركة , لم نقم باضافته حتى الان ولاكن سنشرح في الخطوات القادمة كيفية تنزيلة واضافته.

مجلد main.dart بالنسبة لهذا الملف فهو جذر التطبيق.

اضافة حزم التطبيق :

أنتقل الى ملف pubspec.yaml وقم ب اضافة الحزم التالية :

ListView | JSON Data | Filtering | Searching | Url Launcher | List Navigator | Hero Animation |Lottie Animation

ثم قم بتحرير سطر السماح لملف بيانات json في ملف assets :

assets:

- assets/loading_image.json

اعداد بيانات json :

انشاء بيانات json بشكل مجاني بواسطة موقع mockaroo عن طريق انشاء حساب ثم تسجيل الدخول ثم الانتقال الى قسم Schemas وانشاء تفاصيل البيانات شاهد الفيديو لفهم التفاصيل اكثر , ثم قم بتحويل البيانات من صيغة json الى dart بواسطة موقع json_to_dart.

تتضمن بيانات JSON هذه معرف خاص والاسم الأول واسم العائلة والبريد الإلكتروني والجنس و صورة واسم لوظيفة والملف الشخصي بتنسيق JSON.

شرح اكواد اتطبيق

انشاء كلاس لبيانات json :

انتقل الى ملف data_model ثم الصق نموذج بيانات التطبيق الذي قمت بتحويلة في الخطوة السابقة.

class User {
  late int id;
  late String firstName;
  late String lastName;
  late String email;
  late String gender;
  late String image;
  late String job;
  late String profile;

User(
      {required this.id,
      required this.firstName,
      required this.lastName,
      required this.email,
      required this.gender,
      required this.image,
      required this.job,
      required this.profile});

User.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    firstName = json['first_name'];
    lastName = json['last_name'];
    email = json['email'];
    gender = json['gender'];
    image = json['image'];
    job = json['job'];
    profile = json['profile'];
  }

Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['first_name'] = this.firstName;
    data['last_name'] = this.lastName;
    data['email'] = this.email;
    data['gender'] = this.gender;
    data['image'] = this.image;
    data['job'] = this.job;
    data['profile'] = this.profile;
    return data;
  }
}

جلب البيانات من الانترنت API :

يحتوي هذا الملف على رابط url الخاص الذي يحتوي على بيانات json والذي سيتم الاتصال وجلب البيانات منه ,

كذلك كود انشاء طلب request من الانترنت API لجلب بيانات json على شكل response ثم تحويل هذا response الى json Map بواسطة استيراد مكتبة dart:convert package ثم تحويل json Map الى List بواسطة fromJson().

كذلك استخدمنا If الشرطية و statusCode = 200 بغرض التاكد من نجاح الاتصال وفي حال فشل الاتصال تظهر اشارة التحميل.

في هذا الملف user_tile قمنا ب انشاء كلاس UserTile من نوع StatelessWidget والذي يحتوي على اكواد تصميم القوائم كذلك قمنا باستخدم اداة ListTile لإظهار عناصر البيانات في قوائم , تتكون كل قائمة من عدة عناصر [ صورة و الاسم الاول و اسم العائلة والمسمى الوظيفي وايقونة جانبية ].

كذلك قمنا ب استخدام userTitle لتعريف نوع وجنس المستخدم هل Mr او Ms كما قمنا باستخدام وسيلة onTap للانتقال لصفحة تفاصيل المستخدم وتمرير بيانات المستخدم الى هذه الصفحة.

import 'package:flutter/material.dart';
import 'package:searching_list_with_json/data/data_model.dart';
import 'package:searching_list_with_json/presentation/screens/user_details_page.dart';

class UserTile extends StatelessWidget {
  final User user;

UserTile({required this.user});

/// This function is used to identify User Title Mr. or Ms. ///
  String userTitle() {
    String title = "";
    if (user.gender == "Male") {
      title = "Mr.";
    } else if (user.gender == "Female") {
      title = "Ms.";
    }
    return title;
  }

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 10.0),
      child: Column(
        children: [
          ListTile(
            leading: Hero(
              tag: user.id,
              child: CircleAvatar(
                backgroundImage: NetworkImage(user.image),
                radius: 25,
              ),
            ),
            title: Text(
              '${userTitle()} ${user.firstName} ${user.lastName}',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            subtitle: Text(user.job,
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.blue)),
            trailing: Icon(
              Icons.work_sharp,
              color: Colors.blue,
            ),
            /// this function uses to navigate (move to next screen) User Details page and pass user objects into the User Details page. ///
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => UserDetailsPage(user: user)));
            },
          ),
          Divider(
            thickness: 1.0,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

في هذا الملف loading_widget قمنا ب انشاء كلاس LoadingView من نوع StatelessWidget والذي يحتوي على كود لعرض شاشة التحميل بشكل رسوم متحركة قبل جلب البيانات بواسطة حزمة Lottie ,وتحميل ملف الرسوم المتحركة كملف JSON من موقع LottieFiles و لصقة في مجلد ال assets , وتسميته ب loading_image.

Lottie animation as json file flutter app

في هذا الملف home_page قمنا ب انشاء كلاس HomePage من نوع StatefulWidget والذي يحتوي على كود تصميم الشاشة الرئسية لتطبيق وتتضمن القوائم وشريط البحث. حيث وقمنا بتعريف نوعين من طرق عرض القوائم الاولى users_ والثانية usersDisplay_ و الهدف من الاولى لاضافة وعرض البيانات التي تم جلبها في كل قائمة على حدة اما الثانية بهدف عرض كل القوائم في الشاشة الرئيسية للتطبيق كذلك تستخدم لفلترة وعرض نتائج البحث.

كذلك قمنا باضافة كلتا القائمتين الاولى والثانية كتابع ل (initState) واستخدمنا هذا المتغير isLoading = false للتحقق مما إذا كان التطبيق لا يزال يجلب البيانات أم لا.

ثم أضف قائمة usersDisplay إلى فئة ListView.builder لعرض القوائم. وقمنا بتعريف متغير ال isLoading واضافة قيمة true مسبقا , واستخدمنا if الشرطية بغرض اذا ان التطبيق لم يكتمل من جلب البيانات من الإنترنت تكون القيمة true لذلك يقوم بتشغيل LoadingView وعرض الرسوم المتحركة والانتظار ، اما اذا اكتمل جلب البيانات تكون القيمة false ويتم تشغيل userTile و searchBar. كذلك قمنا بتمرير usersDisplay [index - 1] إلى userTile ككائن يحتوي على بيانات المستخدم.

import 'package:flutter/material.dart';
import 'package:searching_list_with_json/data/data_model.dart';
import 'package:searching_list_with_json/domain/repository.dart';
import 'package:searching_list_with_json/presentation/components/loading_widget.dart';
import 'package:searching_list_with_json/presentation/components/user_tile.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  /// define two User type list views as users and usersDisplay ///
  // used to view fetched data to list //
  List<User> _users = <User>[];
  // used to view all list in our app alse to filtered data as list when searching //
  List<User> _usersDisplay = <User>[];

/// this variable use to check if the app still fetching data or not. ///
  bool _isLoading = true;

@override
  void initState() {
    super.initState();
    fetchUsers().then((value) {
      setState(() {
        _isLoading = false;
        _users.addAll(value);
        _usersDisplay = _users;
        print(_usersDisplay.length);
      });
    });
  }

@override
  Widget build(BuildContext context) {
    const Color lightPrimary = Colors.white;
    const Color darkPrimary = Colors.white;
    return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
            lightPrimary,
            darkPrimary,
          ])),
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            'Users List',
            style: TextStyle(color: Colors.black),
          ),
          backgroundColor: (lightPrimary),
          elevation: 0,
        ),
        backgroundColor: Colors.transparent,
        body: SafeArea(
          child: Container(
            child: ListView.builder(
              itemBuilder: (context, index) {
                if (!_isLoading) {
                  return index == 0
                      ? _searchBar()
                      : UserTile(user: this._usersDisplay[index - 1]);
                } else {
                  return LoadingView();
                }
              },
              itemCount: _usersDisplay.length + 1,
            ),
          ),
        ),
      ),
    );
  }

/// to control with search view as list ///
  _searchBar() {
    return Padding(
      padding: EdgeInsets.all(12.0),
      child: TextField(
        autofocus: false,
        onChanged: (searchText) {
          searchText = searchText.toLowerCase();
          setState(() {
            _usersDisplay = _users.where((u) {
              var fName = u.firstName.toLowerCase();
              var lName = u.lastName.toLowerCase();
              var job = u.job.toLowerCase();
              return fName.contains(searchText) ||
                  lName.contains(searchText) ||
                  job.contains(searchText);
            }).toList();
          });
        },
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          prefixIcon: Icon(Icons.search),
          hintText: 'Search Users',
        ),
      ),
    );
  }
}

شرح الية البحث . أولاً ، نكتب أي شيء على شريط البحث يتحول النص إلى أحرف صغيرة. ثم قم أيضًا بتحويل الاسم الأول للمستخدم واسم العائلة و الوظيفة إلى أحرف صغيرة , ثم يتم إضافة النتائج المطابقة إلى قائمة usersDisplay_ ثم أثناء الكتابة على شريط البحث ، نعيد تلقائيًا عرض نتائج المطابقة في قائمة عرض users_.

في هذا الملف user_details_page قمنا ب انشاء كلاس UserDetailsPage من نوع StatelessWidget والذي يحتوي على كود تصميم شاشة تفاصيل المستخدم.

screen user details listTile flutter app

قمنا باستخدم Url Launcher لفتح البريد الإلكتروني مع تمرير البيانات إلى customLaunch بغرض فتح تطبيق البريد إلاكتروني عند الضغط على عنوان البريد الالكتروني.

كذلك استخدمنا اداة Hero وقمنا بادراج صور المستخدم بها لتظهر عند التنقل من الصفحة الرئيسية إلى صفحة تفاصيل المستخدم.

import 'package:flutter/material.dart';
import 'package:searching_list_with_json/data/data_model.dart';
import 'package:url_launcher/url_launcher.dart';

class UserDetailsPage extends StatelessWidget {
  final User user;

UserDetailsPage({required this.user});

String userTitle() {
    String title = "";
    if (user.gender == "Male") {
      title = "Mr.";
    } else if (user.gender == "Female") {
      title = "Ms.";
    }
    return title;
  }

/// this function with data to open mail application ///
  void customLaunch(command) async {
    if (await canLaunch(command)) {
      await launch(command);
    } else {
      print('Error');
    }
  }

@override
  Widget build(BuildContext context) {
    Color lightPrimary = Colors.white;
    Color darkPrimary = Colors.white;
    return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [lightPrimary, darkPrimary])),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: Text(
            'User Details',
            style: TextStyle(color: Colors.black),
          ),
          centerTitle: true,
          backgroundColor: (lightPrimary),
          elevation: 0,
        ),
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: 16.0,
              ),
              Center(
                /// We insert user images inside Hero animation to navigating and display image from Home Page to User Details Page. ///
                child: Hero(
                  tag: user.id,
                  child: CircleAvatar(
                    backgroundImage: NetworkImage(user.image),
                    radius: 75.0,
                  ),
                ),
              ),
              SizedBox(
                height: 22.0,
              ),
              Text(
                '${userTitle()} ${user.firstName} ${user.lastName}',
                style: TextStyle(
                  fontSize: 25.0,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.left,
              ),
              SizedBox(
                height: 12.0,
              ),
              Text(
                '${user.job}',
                style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.w500,
                ),
                textAlign: TextAlign.left,
              ),
              SizedBox(
                height: 12.0,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text(
                    '${user.email}',
                    style: TextStyle(
                      fontSize: 16.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.blue,
                    ),
                    textAlign: TextAlign.left,
                  ),
                  FlatButton(
                    onPressed: () {
                      /// to view mail application as a subject of the mail, and body massage.///
                      customLaunch(
                          'mailto:${user.email}?subject=Contact%20Information&body=Type%20your%20mail%20here');
                    },
                    child: Icon(
                      Icons.email,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 12.0,
              ),
              Expanded(
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: Padding(
                    padding: const EdgeInsets.only(
                        left: 12.0, right: 12.0, bottom: 20.0),
                    child: Text(
                      user.profile,
                      textAlign: TextAlign.justify,
                      style: TextStyle(
                        fontSize: 16.0,
                        backgroundColor: Colors.black12,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Searching List View with JSON Data Flutter App

Searching List View with JSON Data and navigator Flutter App

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

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

https://brhomapps.blogspot.com/2021/11/fetch-data-from-rest-api-with-search.html

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

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

Search Bar with Json Data Flutter App

https://youtu.be/YOzCwuau-Xo

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

GooD LooK FoR All

brhomapps

بحث هذه المدونة الإلكترونية