كيف يمكن عمل filters للقائمة في flutter

Flutter Dev · 20 سبتمبر 2022

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

كيف يمكن عمل filters للبيانات فيListView.builder يتم جلبهم من خلال FutureBuilder?

اقصد filters المتعدد بمعنى القائمة الان تحتوي على السعر + لون+ المقاس+الموقع

ارغب بتمكين المستخدم من القيام باختيارات اختيارات مختلفة لتصفية هذا القائمة حسب اختياره

الكود المستعمل كالتالي:


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

  @override
  _FilterPageState createState() => _FilterPageState();
}

class _FilterPageState extends State<FilterPage> {
  
  
  Future APIFood() async {
    var apiURL = '***************?id=' +
        ID.toString();
    var response = await http.post(Uri.parse(apiURL));

    var responsebody = jsonDecode(response.body);
    if (responsebody.length > 0) {
      return responsebody;
    } else {}
  }
  @override
  Widget build(BuildContext context) {

    return

      Column(
        children: [




          FutureBuilder(

            future:APIFood(),
            builder: (context, AsyncSnapshot snapshot) {

              if (snapshot.connectionState == ConnectionState.done) {

                if (snapshot.hasData) {
                  return

                    ListView.separated(
                        separatorBuilder: (BuildContext context, int index) {
                          return Divider(
                            thickness: 1,
                          );
                        },
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        scrollDirection: Axis.vertical,
                        physics: ScrollPhysics(),
                        itemBuilder: (BuildContext context, int index) {

                          return Column(
                            children: [

                              Text(
                                snapshot.data[index]['price'].toString(),

                              ),
                              Text(
                                snapshot.data[index]['color'].toString(),

                              ),
                              Text(
                                snapshot.data[index]['size'].toString(),

                              ),
                              Text(
                                snapshot.data[index]['location'].toString(),

                              ),

                            ],
                          );

                        }
                    );


                } else if (snapshot.hasError) {
                  return Center(
                    child: Text(
                      '${snapshot.error} occurred',
                      style: TextStyle(fontSize: 18),
                    ),
                  );


                }
              }

              // Displaying LoadingSpinner to indicate waiting state
              return SizedBox(
                height: MediaQuery.of(context).size.height / 1.3,
                child: Center(
                  child: CircularProgressIndicator(
                    color: Colors.black,
                    valueColor:
                    AlwaysStoppedAnimation<Color>(Colors.black),
                  ),
                ),



              );
            },


          ),
        ],
      );
  }
}

ارغب بإضافة قائمة لتصفية البيانات منفصله

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

Wael Aljamal · 21 سبتمبر 2022

بتاريخ 58 دقائق مضت قال مروان مروان3:

من اين احصل على هذا المتغير i.color كلمة color من اين اتي بها

ذكرت انه على فرض لديك قائمة أغراض، عند النرور على القائمة سيمثل i الغرض الحالي (مثل حلقة for).. و يمكن منه الوصول لخواض العنصر الحالي (حسب دليل التكرار في الحلقة) where.

بتاريخ 59 دقائق مضت قال مروان مروان3:
اما السطر الذي ذكرته انت اصبح بشكل التالي:
    var seachlist = listsearch.where((p) => p.name== ('Ahmad')).toList();

نعم، إن كانت عناصر القائمة تحوي الخاصية name يمكن عمل فلترة حسبها.

أنا ذكرت color حسب سؤالك، فأنت أرفقت خواص العناصر في القائمة و منها السعر أيضا، أي هو مثال

يمكنك طباعة أول عنصر في القائمة

ب print ل list[0] مثلا و سيتم عرض بنية هذه العناصر وهي نفسها ستكون نفس جدولك في قاعدة البيانات mysql

Wael Aljamal · 21 سبتمبر 2022

سيكون لديك قائمة من أغراض، أي عند المرور على القائمة، كل عنصر سيكون له عدة خواص يمكن عمل فلترة منهم

_filteredArray = allItems.where((i) => i.price > 500 && i.color == "red").toList();
^^^^^^^^^^^^^^   ^^^^^^^^              ^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^  ^^^^^^^^

بدل 500 وكلمة red يمكنك وضع متغيرات حالة يمكن للمستخدم إدخالهم وبذلك عند تعديلهم يتم الفترة عند تغيير الحالة

ويمكنك وضع شرط مركب بأي عدد من المتغيرات.

في حال أردت عمل فلترة لبعض الخواص، يمكن تطبيق أكثر من فلتر متتالي لأن وضع شرط مركب لن يعمل

if (color !== "")
 _filteredArrayByColor = allItems.where((i) =>  i.color == color).toList();

^^^^^^^^^^^^^^^^^^^^^^

if (price != 0)
 _filteredArrayByPrice = _filteredArrayByColor.where((i) =>  i.price > 500).toList();

                         ^^^^^^^^^^^^^^^^^^^^^

...

Flutter Dev · 21 سبتمبر 2022

بتاريخ 14 ساعات قال Wael Aljamal:
سيكون لديك قائمة من أغراض، أي عند المرور على القائمة، كل عنصر سيكون له عدة خواص يمكن عمل فلترة منهم
_filteredArray = allItems.where((i) => i.price > 500 && i.color == "red").toList();
^^^^^^^^^^^^^^   ^^^^^^^^              ^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^  ^^^^^^^^
بدل 500 وكلمة red يمكنك وضع متغيرات حالة يمكن للمستخدم إدخالهم وبذلك عند تعديلهم يتم الفترة عند تغيير الحالة

ويمكنك وضع شرط مركب بأي عدد من المتغيرات.

في حال أردت عمل فلترة لبعض الخواص، يمكن تطبيق أكثر من فلتر متتالي لأن وضع شرط مركب لن يعمل
if (color !== "")
 _filteredArrayByColor = allItems.where((i) =>  i.color == color).toList();

^^^^^^^^^^^^^^^^^^^^^^

if (price != 0)
 _filteredArrayByPrice = _filteredArrayByColor.where((i) =>  i.price > 500).toList();

                         ^^^^^^^^^^^^^^^^^^^^^

...

مرحبا اخي الكريم

شاكر لك ردك عزيزي

استفسار بس لو تكرمت

من اين احصل على هذا المتغير i.color كلمة color من اين اتي بها

وضعها بشكل هذا يعطيني الخطاء التالي:

Class 'String' has no instance method 'name'.

طبعا انا قمت بتغيرها الى كلمة name بحكم الحق لدي كذا اسمه name

من اين اتي بها؟

مع العلم اني لو قمت باستبدالها بشكل التالي تعمل :

p.startsWith('The name here')

ولكني لا استطيع بشكل هذا لنني سوف ارتبط بحقل واحد فقط

قمت بتطبيق ميثود الاستعلام بشكل هذا :

  List listsearch = [];
  Future Searchgetdata() async {
    apiURL =
    'https://*******************}';

    var response = await http.post(Uri.parse(apiURL));
    setState(() {
      List jsonList = jsonDecode(response.body);
   
      for (int i = 0; i < jsonList.length; i++) {
      
       listsearch.add(jsonList[i]['name'] + ':' + jsonList[i]['Price'].toString());
      }
    });
  }

اما السطر الذي ذكرته انت اصبح بشكل التالي:

    var seachlist = listsearch.where((p) => p.name== ('Ahmad')).toList();

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

كيف يمكن عمل filters للقائمة في flutter

السؤال

Flutter Dev

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Flutter Dev

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية