Flutter : List View builder don't view result of search

Question

I have an app with Flutter ,try to create search for product engine ,the backend is work fine as I tested it on postman ,but I have problem with Future Builder in Flutter. first I have provider to get data from server as a result of search :

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import '../models/all_products.dart';

class ProductProvider with ChangeNotifier {
  List<Product> products = [];

  get myProdut => products;
  void search(name) async {
    try {
      var url = 'http://10.0.2.2:8000/api/user/search/$name';
      var response = await http.get(url);
      var data = jsonDecode(response.body);
      for (var x in data) {
        var list = Product(
            id: x['id'],
            productName: x['productName'],
            categoryId: x['categoryId'],
            price: x['price'],
            sale: x['sale']);
        products.add(list);
      }
    } catch (e) {
      print(e);
    }
    notifyListeners();
  }
}

in the search page I have search icon inside consumer to listen to provider when click execute search method , the I have Future Builder inside consumer to view data :

return Container(
        margin: EdgeInsets.only(top: 15),
        child: ListView(
          children: [
        Text('Search for Producs',
            textAlign: TextAlign.center, style: TextStyle(fontSize: 26)),
        SizedBox(
          height: 15,
        ),
        Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                border: Border.all(width: 2, color: Color(0xff0E2153))),
            margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
            alignment: Alignment.center,
            width: mySize.width,
            child: ListTile(
              leading: Consumer<ProductProvider>(
                builder: (context, prodProv, child) {
                  return IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {
                      prodProv.search(_controller.text);
                    },
                  );
                },
              ),
              title: TextField(
                style: TextStyle(fontSize: 22, color: Color(0xff0E2153)),
                decoration: InputDecoration(
                    hintText: 'Search', border: InputBorder.none),
                controller: _controller,
              ),
            )),
        Consumer<ProductProvider>(builder: (context, prod, child) {
          var list = prod.myProdut;
          return ListView.builder(
          shrinkWrap: true,
            itemCount: list.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(list[index].productNameb));
            },
          );
        }),
      ],
        ));

when I load search page I get this error :Class 'Product' has no instance getter 'productNameb' ,because all data inside list is : Instatnt of Product

where is my mistake ? how can I solve it ?

not familiar with `ChangeNotifier`, but for `future:`, it should refer to a `Future` method. In your case, you are referring to `List`, which is wrong. — John Joe, Dec 09 '20 at 11:17
then I can't use a list inside future builder ,i think i dont need to future builder — Sermed mayi, Dec 09 '20 at 11:22
@JohnJoe I deleted future builder as I dont need it ,I will update the question — Sermed mayi, Dec 09 '20 at 11:25

score 0 · Answer 1 · answered Dec 09 '20 at 12:32

the issue have been solved : first I add clear products list on start of search method :

class ProductProvider with ChangeNotifier {
  List<Product> products = [];

  get myProdut => products;

  void search(name) async {
    try {
      products.clear();
      var url = 'http://10.0.2.2:8000/api/user/search/$name';
      var response = await http.get(url);
      var data = jsonDecode(response.body);
      for (var x in data) {
        var list = Product(
            id: x['id'],
            product_name: x['product_name'],
            categoryId: x['categoryId'],
            price: x['price'],
            sale: x['sale']);
        products.add(list);
      }
    } catch (e) {
      print(e);
    }
    notifyListeners();
  }
}

changing the search for icon button to onchanged text field :

Consumer<ProductProvider>(
                    builder: (context, prodProv, child) {
                      return TextField(
                        onChanged: (val) {
                          prodProv.search(val);
                        },
                        style:
                            TextStyle(fontSize: 22, color: Color(0xff0E2153)),
                        decoration: InputDecoration(
                            hintText: 'Search', border: InputBorder.none),
                        controller: _controller,
                      );
                    },
                  ),

and the listview builder which show search result :

Consumer<ProductProvider>(builder: (context, prod, child) {
              var list = prod.myProdut;
              return ListView.builder(
                shrinkWrap: true,
                itemCount: list.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text(list[index].product_name));
                },
              );
            }),

Flutter : List View builder don't view result of search

where is my mistake ? how can I solve it ?

1 Answers1