Beginner: How to combine a SearchView with Openfoodfacts_dart – Flutter

I’ve been playing around with OpenFoodFacts API and in order to develop this App you’re looking for the main problem is that the API always asks you for a barcode, there’s no way to input words, and it only returns one result. This is an instrinsic problem with the API, maybe other APIs can fit your needs better.

Anyway, wanting to program an App with close to no experience in programming can turn you mad. I’d recommend you to go step by step and start with any introductory tutorial on any language (Python, java, javascript, etc…). Then focus on a flutter specific course. There are plenty on youtube. But basically you need 3 widgets: textField, any button, and a ListView. And I’d also recommend a State manager such as provider. To keep it simple, the provider will have the functions that will search for the data introduced in your textfield and it will trigger from the button.

I’d also suggest you to look for alternatives, I don’t think you’re the first one with this problem, maybe some other apps are more complex, but they will work for you as well.

Happy coding!
Pablo

Edit:

  Future<void> example() async {
    final url =
        'https://world.openfoodfacts.org/cgi/search.pl?&search_terms=PRODUCT&action=process&json=1&fields=product_name,brands,ingredients_text,carbohydrates_100g,fat_100g,proteins_100g&search_simple=1';
    final resp = await http.get(Uri.parse(url)); // api call
    Map<String, dynamic> respMap =
        json.decode(resp.body); // transform json string into map
    List<dynamic> products =
        respMap['products']; // get products in a list of maps
    List<ProductInfo> productModelList = products
        .map((e) => ProductInfo.fromMap(e))
        .toList(); // this iterates over the previous list in order to convert each map into an object, then the map of objects is converted to a list.
    print(
        productModelList); // this will return [Instance of 'ProductInfo', ... ] for each element in the previous list (24 for the url)
  }

And my productInfo class:

import 'dart:convert';

ProductInfo productInfoFromMap(String str) =>
    ProductInfo.fromMap(json.decode(str));

String productInfoToMap(ProductInfo data) => json.encode(data.toMap());

class ProductInfo {
  ProductInfo({
    required this.brands,
    required this.carbohydrates100G,
    required this.fat100G,
    required this.ingredientsText,
    required this.productName,
    required this.proteins100G,
  });

  String? brands;
  num? carbohydrates100G;
  num? fat100G;
  String? ingredientsText;
  String? productName;
  num? proteins100G;

  factory ProductInfo.fromMap(Map<String, dynamic> json) => ProductInfo(
        brands: json["brands"],
        carbohydrates100G: json["carbohydrates_100g"],
        fat100G: json["fat_100g"],
        ingredientsText: json["ingredients_text"],
        productName: json["product_name"],
        proteins100G: json["proteins_100g"],
      );

  Map<String, dynamic> toMap() => {
        "brands": brands,
        "carbohydrates_100g": carbohydrates100G,
        "fat_100g": fat100G,
        "ingredients_text": ingredientsText,
        "product_name": productName,
        "proteins_100g": proteins100G,
      };
}

Your classes must have the convert from a to json methods. I build mine in quicktype, which is very handy. You could encounter some problems, such as having to convert int to double and reverse since some data can be sent int or double. You can control over that on you toMap and fromMap, but in order to make it simple, just use num if a variable can be int or double. Also, your problem seems to be that some values might be null, like before, you could either control those on your toMap and fromMap functions, or, what I did, use the ‘?’ on object type declaration which lets us convert from a Map with a null value.