How to filter list in flutter?

Question

I'm trying to add a filter to my list

here is what i do

productTemp.sort((a, b) => b.productPrice.compareTo(a.productPrice));
        productTemp = productTemp.where((x) =>
            x.productName.toLowerCase().contains(inputText.toLowerCase()));
        productTemp = productTemp.toSet().toList();

here how i set it up

List<ProductsModel> productTemp = [];

then this

class ProductsModel {
  final String productId;
  final String productName;
  final String isNew;
  final String isHot;
  final String productImage;
  final String categoryId;
  final String productPrice;
  final String productDescription;

  ProductsModel(
      {this.productId,
      this.productName,
      this.isNew,
      this.isHot,
      this.productImage,
      this.categoryId,
      this.productPrice,
      this.productDescription});

  factory ProductsModel.fromJson(Map<String, dynamic> json) {
    return ProductsModel(
      productId: json['productId'] as String,
      productName: json['productName'] as String,
      isNew: json['isNew'] as String,
      isHot: json['isHot'] as String,
      productImage: json['productImage'] as String,
      categoryId: json['categoryId'] as String,
      productPrice: json['productPrice'] as String,
      productDescription: json['productDescription'] as String,
    );
  }

  bool operator ==(o) =>
      o is ProductsModel && productId == o.productId;

  int get hashCode => productId.hashCode;
}

so i get this error

[ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: type 'WhereIterable' is not a subtype of type 'List'

how can i fix it ? thanks in advance

Answer 1

Your productTemp is of type List but where returns Iterable. You need to turn the output of where into a List.

productTemp.where(
  (x) => x.productName.toLowerCase().contains(inputText.toLowerCase())
).toList();

Answer 2

Check out this example project, it has a example for filtering a list.

https://github.com/Ephenodrom/Flutter-Advanced-Examples/tree/master/lib/examples/filterList

class Car {
  final String name;
  final String brand;
  final String type;
  final int maxSpeed;
  final int horsePower;
  final String year;
  final bool selfDriving;
  final double price;

  Car({
    this.name,
    this.brand,
    this.type,
    this.maxSpeed,
    this.horsePower,
    this.year,
    this.selfDriving,
    this.price,
  });

  static final cars = [
    new Car(
        name: "Jazz",
        brand: "Honda",
        type: "gas",
        maxSpeed: 200,
        horsePower: 83,
        year: "2001",
        selfDriving: false,
        price: 2000.00),
    new Car(
        name: "Citigo",
        brand: "Skoda",
        type: "gas",
        maxSpeed: 200,
        horsePower: 75,
        year: "2011",
        selfDriving: false,
        price: 10840.00),
    new Car(
        name: "Octavia Combi",
        brand: "Skoda",
        type: "diesel",
        maxSpeed: 240,
        horsePower: 149,
        year: "2016",
        selfDriving: false,
        price: 32650.00),
    new Car(
        name: "Rapid",
        brand: "Skoda",
        type: "diesel",
        maxSpeed: 240,
        horsePower: 95,
        year: "2012",
        selfDriving: false,
        price: 20190.00),
    new Car(
        name: "Q2",
        brand: "Audi",
        type: "gas",
        maxSpeed: 280,
        horsePower: 140,
        year: "2018",
        selfDriving: false,
        price: 28000.00),
    new Car(
        name: "Model 3",
        brand: "Tesla",
        type: "electric",
        maxSpeed: 280,
        horsePower: 140,
        year: "2018",
        selfDriving: true,
        price: 35000),
  ];
}

import 'package:advanced_flutter_example/DefaultAppBar.dart';
import 'package:advanced_flutter_example/examples/filterList/Car.dart';
import 'package:flutter/material.dart';

class Example1 extends StatefulWidget {
  Example1();

  final String title = "Filtering List";
  final String exampleUrl = "https://github.com/Ephenodrom/FlutterAdvancedExamples/tree/master/lib/examples/filterList";

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

class _Example1State extends State<Example1> {
  List<Car> initialList = Car.cars;
  List<Car> currentList = [];

  //filter
  bool selfDriving = false;
  double maxPrice = 100000;
  String carType = "all";

  final controller = new TextEditingController();

  @override
  initState() {
    super.initState();
    controller.addListener(onChange);
    filterCars();
  }

  @override
  Widget build(BuildContext context) {
    filterCars();
    return Scaffold(
        appBar: DefaultAppBar(widget.title,widget.exampleUrl),
        body: Container(
          margin: EdgeInsets.only(top: 10),
          child: Column(children: [
            Text("Search for your car",style: Theme.of(context).textTheme.headline,),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: TextField(
                controller: controller
              ),
            ),
            SwitchListTile(
              title: Text('Selfdriving'),
              value: selfDriving,
              onChanged: (changed){
                setState(() => selfDriving = changed);
              }
            ),
            Slider(
              label: '${maxPrice.round()} \$',
              activeColor: Colors.indigoAccent,
              min: 0.0,
              max: 100000.0,
              divisions: 20,
              onChanged: (newRating) {
                setState(() => maxPrice = newRating);
              },
              value: maxPrice,
            ),
            ListTile(
              leading: Text("Engine Type"),
              trailing: DropdownButton(
                elevation: 16,
                onChanged: (item){
                  setState(() {
                    carType = item;
                  });
                },
                hint:Text(carType),
                items: [
                  DropdownMenuItem<String>(
                      child: new Text("All"),
                      value: "All"
                  ),
                  DropdownMenuItem<String>(
                      child: new Text("Gas"),
                      value: "Gas"
                  ),
                  DropdownMenuItem<String>(
                      child: new Text("Diesel"),
                      value: "Diesel"
                  ),
                  DropdownMenuItem<String>(
                      child: new Text("Electric"),
                      value: "Electric"
                  )
                ],
              )
            ),
            Expanded(
              child: ListView.builder(
                  itemCount: currentList.length,
                  itemBuilder: (BuildContext context, int index) {
                    Car current = currentList.elementAt(index);
                    return Card(
                      elevation: 4,
                      child: ListTile(
                        title: Text(current.name),
                        subtitle: Text(current.brand),
                        trailing: Text(current.price.toString()+" \$"),
                        leading: Text(current.year),
                      ),
                    );
                  }),
            ),
          ]),
        ));
  }

  onChange() {
    setState((){});
  }

  filterCars() {
    // Prepare lists
    List<Car> tmp = [];
    currentList.clear();

    String name = controller.text;
    print("filter cars for name " + name);
    if (name.isEmpty) {
      tmp.addAll(initialList);
    } else {
      for (Car c in initialList) {
        if (c.name.toLowerCase().startsWith(name.toLowerCase())) {
          tmp.add(c);
        }
      }
    }
    currentList = tmp;

    if(selfDriving) {
      tmp = [];
      print("filter cars for selfdriving " + selfDriving.toString());
      for (Car c in currentList) {
        if (c.selfDriving == selfDriving) {
          tmp.add(c);
        }
      }
      currentList = tmp;
    }

    print("filter cars for max price " + maxPrice.toString());
    tmp = [];
    for (Car c in currentList) {
      if(c.price < maxPrice){
        tmp.add(c);
      }
    }
    currentList = tmp;
    if(carType.toLowerCase() != "all") {
      tmp = [];
      print("filter cars for type " + carType);
      for (Car c in currentList) {
        if (c.type == carType.toLowerCase()) {
          tmp.add(c);
        }
      }
      currentList = tmp;
    }
  }

}