كيفية البحث عن البيانات في listview في flutter

Flutter Dev · 30 سبتمبر 2022

تحيه طيبه للجميع

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

شاهد الصورة التأليه لفهم المشكلة اكثر:

كما تشاهد أعلاه لا يمكنني الكتابة في TextFiled

قمت بأعداد التطبيق من خلال صفحتين:

الصفحة الأولى وهيا التي أقوم بأرسال القائمة من خلالها الى الصفحة الثانية لعرضها من FutureBuilder :

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

class _HomePageState extends State<firstPage> {

 
  @override
  void initState() {

 
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: kBackground,
        body: Center(
            child: Column(
              children: [
                Expanded(
                  child: FutureBuilder<List<AllProductModel>>(
                    future: fetchYourProduct(Uids, NameUserContry),
                    builder: (context, snapshot) {
                      final ListDataDisplay  = snapshot.data;

                      switch (snapshot.connectionState) {
                        case ConnectionState.waiting:
                          return Center(child: CircularProgressIndicator());
                        default:
                          if (snapshot.hasError) {
                            return Center(
                                child: Text('Some error occurred!'));
                          } else {
                            return  UserPage(ListDataDisplay:ListDataDisplay);
                          }
                      }
                    },
                  ),


                )
              ],
            ))

        );
  }

}

اما الصفحة الثانية وهيا التي أقوم بعرض البيانات من خلالها بالإضافة الى انها تتضمن شريط البحث:

class UserPage extends StatefulWidget {
  final  ListDataDisplay;
  UserPage({Key? key, required this.ListDataDisplay}) : super(key: key);
  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {

  TextEditingController editingController = TextEditingController();
  Widget appBarTitle =  Text('');
  Icon actionIcon =  Icon(
    Icons.search,
    color: CustomColors.firebaseNavy,
  );

  String searchString = "";
  TextEditingController searchController = TextEditingController();


  @override
  Widget build(BuildContext context) =>
      Scaffold(
          appBar:  AppBar(
              centerTitle: true,
              title:appBarTitle,
              backgroundColor: CustomColors.firebaseGrey,
              elevation: 1.5,
              actions: <Widget>[
                IconButton(onPressed: (){
                  setState(() {
                    if ( this.actionIcon.icon == Icons.search){
                      this.actionIcon =  Icon(Icons.close);
                      this.appBarTitle =  TextField(
                        onChanged: (value) {
                          setState((){
                            searchString = value;
                          });

                        },
                        controller: searchController,
                        style:  TextStyle(
                          color: Colors.black,

                        ),
                        decoration:  InputDecoration(
                            labelText: 'Name',
                            enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),

                        ),
                      );
                    }
                    else {
                      this.actionIcon =  Icon(Icons.search);
                      this.appBarTitle =  Text("List");
                      searchController.clear();
                      searchString='';
                    }

                  }
                  );

                },icon: actionIcon,
                )



                ,]
          ),



          body:

          ListView.builder(

              physics: ScrollPhysics(),
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: widget.ListDataDisplay.length,

              itemBuilder: (context, index) {
                return
                  "${widget.ListDataDisplay[index]
                      .name}" ':' "${widget.ListDataDisplay[index].coponId}"
                      .contains(searchString) ?
                  Card(
                    elevation: 1.5,
                    child: Container(
                      padding: EdgeInsets.all(6),
                      child: Row(
                        children: <Widget>[
                       Text(widget.ListDataDisplay[index].name)

                        ],
                      ),
                    ),
                  ) : Container();

              }
          )

      );
}

كيف يمكن حل هذا المشكلة؟ لتمكين المستخدم من إمكانية البحث

تم التعديل في 30 سبتمبر 2022 بواسطة مروان مروان3

Ahmed Sadek Elamine Touahria · 30 سبتمبر 2022

بصراحة هناك حزمة ممتازة لعمل search إحترافي مثل whatsapp search وغيرها .

إسم الحزمة wp_search_bar ، وهذه طريقة عملها :

تحميل الحزمة

$ dart pub add wp_search_bar

تأكد من وجودها في dependencies

dependencies:
  wp_search_bar: ^0.0.5

تحديد البيانات التي تريد إظهارها في عرض القائمة

List<Map<String, String>> data = [
    {'name': "Mohammad", 'message': "message from mhammad"},
    {'name': "Kamel", 'message': "message from kamel"},
    {'name': "Nadine", 'message': "how are you ?"},
    {'name': "Joseph", 'message': "hello...!"},
    {'name': "71966691", 'message': "Hi"},
    {'name': "03405609", 'message': "hiiii...."},
    {'name': "Mohammad", 'message': "message from mhammad"},
    {'name': "Kamel", 'message': "message from kamel"},
    {'name': "Nadine", 'message': "how are you ?"},
    {'name': "Joseph", 'message': "hello...!"},
    {'name': "71966691", 'message': "Hi"},
    {'name': "03405609", 'message': "hiiii...."},
  ];

تحديد الأزرار التي يجب استخدامها في شريط البحث.

var buttonFilters = {
          'name': {
            'name': 'name',
            'selected': false,
            'title': 'Name',
            'operation': 'CONTAINS',
            'icon': Icons.supervised_user_circle_rounded,
          },
          'message': {
            'name': 'message',
            'selected': false,
            'title': 'Message',
            'operation': 'CONTAINS',
            'icon': Icons.message,
          },
          'date': {
            'name': 'Date',
            'selected': false,
            'title': 'Date',
            'operation': 'CONTAINS',
            'icon': Icons.date_range,
          },
          'other': {
            'name': 'other',
            'selected': false,
            'title': 'Other',
            'operation': 'CONTAINS',
            'icon': Icons.more,
          },
        };

بناء شريط البحث

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WPSearchBar(
        listOfFilters: buttonFilters,
        materialDesign: const {
          'title': {'text': 'hsoub'},
        },
        onSearch: (filter, value, operation) {
        },
        body: Container(
          decoration: const BoxDecoration(color: Color(0xff121b22)),
          child: ListView.builder(
              itemCount: filteredData.length,
              itemBuilder: (context, index) {
                var item = filteredData[index];
                return ListTile(
                  title: Text(
                    item['name'].toString(),
                    style: const TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                );
              }),
          ),
      ),
    );
  }
}

Flutter Dev · 30 سبتمبر 2022

بتاريخ 1 ساعة قال Ahmed Sadek:

بصراحة هناك حزمة ممتازة لعمل search إحترافي مثل whatsapp search وغيرها .

إسم الحزمة wp_search_bar ، وهذه طريقة عملها :

تحميل الحزمة


$ dart pub add wp_search_bar

تأكد من وجودها في dependencies


dependencies:
  wp_search_bar: ^0.0.5

تحديد البيانات التي تريد إظهارها في عرض القائمة


List<Map<String, String>> data = [
    {'name': "Mohammad", 'message': "message from mhammad"},
    {'name': "Kamel", 'message': "message from kamel"},
    {'name': "Nadine", 'message': "how are you ?"},
    {'name': "Joseph", 'message': "hello...!"},
    {'name': "71966691", 'message': "Hi"},
    {'name': "03405609", 'message': "hiiii...."},
    {'name': "Mohammad", 'message': "message from mhammad"},
    {'name': "Kamel", 'message': "message from kamel"},
    {'name': "Nadine", 'message': "how are you ?"},
    {'name': "Joseph", 'message': "hello...!"},
    {'name': "71966691", 'message': "Hi"},
    {'name': "03405609", 'message': "hiiii...."},
  ];

تحديد الأزرار التي يجب استخدامها في شريط البحث.


var buttonFilters = {
          'name': {
            'name': 'name',
            'selected': false,
            'title': 'Name',
            'operation': 'CONTAINS',
            'icon': Icons.supervised_user_circle_rounded,
          },
          'message': {
            'name': 'message',
            'selected': false,
            'title': 'Message',
            'operation': 'CONTAINS',
            'icon': Icons.message,
          },
          'date': {
            'name': 'Date',
            'selected': false,
            'title': 'Date',
            'operation': 'CONTAINS',
            'icon': Icons.date_range,
          },
          'other': {
            'name': 'other',
            'selected': false,
            'title': 'Other',
            'operation': 'CONTAINS',
            'icon': Icons.more,
          },
        };

بناء شريط البحث


@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WPSearchBar(
        listOfFilters: buttonFilters,
        materialDesign: const {
          'title': {'text': 'hsoub'},
        },
        onSearch: (filter, value, operation) {
        },
        body: Container(
          decoration: const BoxDecoration(color: Color(0xff121b22)),
          child: ListView.builder(
              itemCount: filteredData.length,
              itemBuilder: (context, index) {
                var item = filteredData[index];
                return ListTile(
                  title: Text(
                    item['name'].toString(),
                    style: const TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                );
              }),
          ),
      ),
    );
  }
}

اهلا اخي الكريم

شاكر لك الافاده اخوي ولكن افضل تجنب الحزم قدر الامكان في مشروعي تعرف مشاكل توافق وتحديثات وغيرها

الا تملك فكره عن سبب المشكله الذي تحدث لدي؟

كيفية البحث عن البيانات في listview في flutter

السؤال

Flutter Dev

2 أجوبة على هذا السؤال

Recommended Posts

Ahmed Sadek Elamine Touahria

Flutter Dev

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية