شرح كيفية عمل search مع with filtter
امكانية اضافة مربع البحث في تطبيقك قمنا بشرحه لكم باكثر من طريقة في موقعنا واغلب الدروس الموجوده على الانترنت قامت بشرح هذا الsearch ولكن في هذا الدرس سوف نشرح شيئ مختلف في عملية البحث حيث سوف نقوم بتغيير البيانات اثناء عملية البحث على عنصر معين وعرضه كما هو موضح بالصورة الخاصه بالمقاله وسوف نقوم بتنفيذ الشرح بطريقتين يمكنك استخدام اي طريقة منهم كما تريد بدون مشاكل فكلا الطرق تأدي الى نفس النتيجه في النهايه .
توجد اطارات عمل مشتركة بين الأنظمة الأساسية مثل Xamarin و React Native بالفعل في السوق لتطوير تطبيقات iOS و Android بقاعدة رمز واحدة. بينما يشارك Flutter المفاهيم مع React Native و Xamarin ، تختلف البنية الفنية لجميع الاطارات الثلاثة اختلافًا كبيرًا. دعنا نرى كيف تتراكم Flutter مقابل أطر العمل المشتركة بين الأنظمة الأساسية باستخدام المعايير التالية. دون إجراء أي مقارنات مع الأنظمة الأساسية الأخرى ، إليك بعض الميزات والسمات التي يمكن أن تغريك بتجربة Flutter: في ديسمبر 2018 ، أصبح Flutter مستقرًا. ثم بدأ في إنشاء تطبيقات فيه ، ووصل إلى درجة غير مسبوقة من النشوة. هذا رائع؛ إنه أمر رائع بالنسبة لنا ، ولكن ماذا يعني ذلك لمطور البرامج الرائد لديك؟
show search screen
سوف نقوم بالكود الاول بوضع زر عندما يتم النقر عليه ينتقل الى المستخدم الى صفحة بحث ويمكنه من خلال هذه الصفحه ان يبحث عن اي عنصر يرغب بعرضه وبناء على الحروف التي يدخلها سوف يتم عمل فلتره للعناصر واضافتها في List جديده ويتم عرضها وعندما يتم النقر عليها تفتح الصفحه الجديده بالبيانات التي نقر عليها المستخدم كما هو موضح .
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
الطريقة الاخرى وهيا اننا سوف نقوم بعمل تصميم لصفحة عادي جدا وسوف يكون هذا التصميم محتوى على مربع للبحث وعندما يتم البحث يتم تحديث البيانات وجلب البيانات الجديده التي يبحث عنها وعندما يتم النقر يتم الانتقال الى صفحه اخرى تحتوي على بيانات العنصر وهذا التصميم الذي افضله عن السابق لانه يسمح لك بالتخصص بشكل افضل وتستطيع من خلاله ارفاقه في اي تصميم او جزء من التصميم الذي تعمل عليه وهو يعمل بنفس الاليه التي يعمل بها الكود السابق .
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.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
هذا سوف يكون معبر عن عملية الانتقال وسوف نستقبل الاسم والرابط الخاص بالصورة وبعدها سوف نقوم بعرضهم كما هو موضح .
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 );
}
}
لمزيد من المقالات
- شرح كيفية تحديث flutter وDart الى احدث اصدار
- شرح كيفية عمل post للبيانات من نوع params داخل الapi في flutter
- شرح كيفية استخدام الapi مع repostery في Flutter وتنظيم الكود
- شرح كيفية التاكد من الاتصال بالانترنت وفي حالة عدم الاتصال اظهار صفحة عدم وجود انترنت
- شرح كيفية تكبيره الصورة والتحكم في جميع تفاصيلها بواسطة flutter
