القائمة الرئيسية

الصفحات

شرح كيفية عمل search مع with filtter


شرح كيفية عمل search مع with filtter

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


توجد اطارات عمل مشتركة بين الأنظمة الأساسية مثل Xamarin و React Native بالفعل في السوق لتطوير تطبيقات iOS و Android بقاعدة رمز واحدة. بينما يشارك Flutter المفاهيم مع React Native و Xamarin ، تختلف البنية الفنية لجميع الاطارات الثلاثة اختلافًا كبيرًا. دعنا نرى كيف تتراكم Flutter مقابل أطر العمل المشتركة بين الأنظمة الأساسية باستخدام المعايير التالية. دون إجراء أي مقارنات مع الأنظمة الأساسية الأخرى ، إليك بعض الميزات والسمات التي يمكن أن تغريك بتجربة Flutter: في ديسمبر 2018 ، أصبح Flutter مستقرًا. ثم بدأ في إنشاء تطبيقات فيه ، ووصل إلى درجة غير مسبوقة من النشوة. هذا رائع؛ إنه أمر رائع بالنسبة لنا ، ولكن ماذا يعني ذلك لمطور البرامج الرائد لديك؟


show search screen

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


show search screen

showSearch.dart


import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
              onPressed: () {
                showSearch(context: context, delegate: MySearch());
              },
              icon: Icon(Icons.search)),
        ],
      ),
      body: Container(),
    );
  }
}

class MySearch extends SearchDelegate {
  @override
  List<String> listResults = [
    'java',
    'python',
    'dart',
    'c++',
    'html',
    'css',
    'javaScript',
    'kotlin',
    'PHP',
    'SQL',
    'swift'
  ];


  // Actions appbar .
  @override
  List<Widget>? buildActions(BuildContext context) => [
        IconButton(
          onPressed: () {
            if (query.isEmpty) {
              close(context, null);
            } else {
              query = '';
            }
          },
          icon: const Icon(Icons.clear),
        ),
      ];

  // Leading appbar .
  @override
  Widget? buildLeading(BuildContext context) {
    IconButton(
      onPressed: () {
        close(context, null);
      },
      icon: const Icon(Icons.arrow_back),
    );
  }


  // design screen result
  @override
  Widget buildResults(BuildContext context) => Center(
        child: Text(
          query,
          style: TextStyle(fontSize: 64, fontWeight: FontWeight.bold),
        ),
      );

  // during search .
  @override
  Widget buildSuggestions(BuildContext context) {

    List<String> list = listResults.where((element){
      final result = element.toLowerCase();
      final input = query.toLowerCase();
      return result.contains(input);
    }).toList();

    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (context, index) {
        final suggestion = list[index];
        return ListTile(
          title: Text(suggestion),
          onTap: () {
            query = suggestion;
            showResults(context);
          },
        );
      },
    );
  }
}


search with filter

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


search with filter

filter.dart


import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:fluttrtest/constants/constants.dart';
import 'package:fluttrtest/models/search.dart';
import 'package:fluttrtest/pages/intent.dart';

class FullPage extends StatefulWidget {
  const FullPage({Key? key}) : super(key: key);

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage> {
   final _controller = TextEditingController();
   List<SearchModel> list = allData;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Container(
            margin: const EdgeInsets.fromLTRB(16, 16, 16, 16),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                suffixIcon: IconButton(onPressed: (){
                  _controller.clear();
                  searchData('');
                },icon: Icon(Icons.clear),),
                hintText: 'search here',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                  borderSide: const BorderSide(color: Colors.black),
                )
              ),
              onChanged: SearchData,
            ),
          ),
          Expanded(
            child:ListView.builder(
            itemCount: list.length,
            itemBuilder: (context, index) {
            final data = list[index];
            return ListTile(
              leading: Image.network(data.imageUrl,height: 50,width: 50,fit: BoxFit.cover),
              title: Text(data.title),
              onTap: ()=> navToPush(context, IntentData(
                title: list[index].title,url:list[index].imageUrl)),
            );
          },))
        ],
      ),
    );
  }
void searchData(String query) {
    final suggestion = allData.where((element) {
      final titleData = element.title.toLowerCase();
      final input = query.toLowerCase();
      return titleData.contains(input);
    }).toList();
    setState(()=> list = suggestion );
}

}


model data

سوف نقوم في هذا الجزء بعمل model يحتوي على البيانات ومنها سوف نرفع مجموعه من البيانات التي يمكننا استخدمها والتجربه عليها بدون مشاكل .


model data

model.dart


class SearchModel {
  final String title;
  final String imageUrl;

  const SearchModel({
    required this.title,
    required this.imageUrl,
  });
}

const allData = [

  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654476726612-32175a77f2b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=678&q=80',
    title: 'data test',
  ),
  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654722439127-0645ad92650b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
    title: 'image to image',
  ),
  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654720482200-71eaa3af496d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80',
    title: 'geecoders',
  ),
  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654718012354-74fbd5e44af1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=765&q=80',
    title: 'this is data',
  ),
  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654722440214-9936cf1afbf6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
    title: 'code flutter test',
  ),  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654713989222-b58f01cdbf16?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
    title: 'search with filter data',
  ),
  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654639985967-bc67b6ad8574?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
    title: 'language dart',
  ),
  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654718145010-a7c4b70032be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
    title: 'geecoders is here',
  ),
  SearchModel(
    imageUrl: 'https://images.unsplash.com/photo-1654599879153-61eb2d785fb7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
    title: 'title and image data',
  ),
];


Navigator.push page

هذا سوف يكون معبر عن عملية الانتقال وسوف نستقبل الاسم والرابط الخاص بالصورة وبعدها سوف نقوم بعرضهم كما هو موضح .


Navigator.push page

IntentData.dart


import 'package:flutter/material.dart';

class IntentData extends StatelessWidget {
  const IntentData({Key? key , required this.title, required this.url}) : super(key: key);
  final String url , title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: [
          Image.network(url,fit: BoxFit.cover,width: double.infinity,),
        ],
      ),
    );
  }
}


عمل بحث مع انميشن 


material_floating_search_bar: ^0.3.7


عمل بحث مع انميشن


searchAnimation.dart


import 'package:flutter/material.dart';
import 'package:material_floating_search_bar/material_floating_search_bar.dart';

class ChatPage extends StatefulWidget {
  const ChatPage({Key? key}) : super(key: key);

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {

  List<String> allData = [
    'test',
    'gee',
    'geecoders',
    'data',
    'geocoder',
    'flutter',
    'filter',
  ];

  late List<String> list = allData;

  @override
  Widget build(BuildContext context) => Scaffold(
          body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FloatingSearchBar(
          backdropColor: Colors.transparent,
          hint: 'Search...',
          borderRadius: BorderRadius.circular(15),
          scrollPadding: const EdgeInsets.only(top: 16, bottom: 56),
          transitionDuration: const Duration(milliseconds: 500),
          transitionCurve: Curves.easeInOut,
          physics: const BouncingScrollPhysics(),
          openAxisAlignment: 0.0,
          debounceDelay: const Duration(milliseconds: 500),
          onQueryChanged: (query) {
            searchData(query);
          },
          transition: CircularFloatingSearchBarTransition(),
          actions: [
            // FloatingSearchBarAction(
            //   showIfOpened: false,
            //   child: CircularButton(
            //     icon: const Icon(Icons.place),
            //     onPressed: () {
            //       print('Places button pressed');
            //     },
            //   ),
            // ),
            FloatingSearchBarAction.searchToClear(
              showIfClosed: false,
            ),
            FloatingSearchBarAction.back(
              showIfClosed: false,
            ),
          ],
          builder: (context, transition) {
            return Material(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10),
              elevation: 3.0,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: list.map((text) {
                  return Material(
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    borderRadius: BorderRadius.circular(10),
                    child: ListTile(
                      title: Text(text),
                      onTap: () {
                        print(text);
                      },
                    ),
                  );
                }).toList(),
              ),
            );
          },
        ),
      ));

  void searchData(String query) {
    final suggestion = allData.where((element) {
      final titleData = element.toLowerCase();
      final input = query.toLowerCase();
      return titleData.contains(input);
    }).toList();
    setState(()=> list = suggestion );
  }

}


لمزيد من المقالات


تعليقات

التنقل السريع