flatter按类别获取json数据

我目前正在开发一个电子商务应用程序。我使用ListView.builder显示数据，但我不知道如何根据所选类别获取产品

class ProduitPage extends StatefulWidget {
  ProduitPage({
    Key key,
    this.categoryId,
  }) : super(key: key);

  int categoryId;

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

class _ProduitPageState extends State<ProduitPage> {
  List<Produit> _produits = List<Produit>();

  

  Future<List<Produit>> fetchProduits() async {
    //var url = 'http://192.168.8.100:8000/api/produits';
    var url = apilink + prod_url;
    final response = await http.get(url);
    var produits = List<Produit>();

    if (response.statusCode == 200) {
      var produitsJson = json.decode(response.body);
      for (var produitJson in produitsJson) {
        produits.add(Produit.fromJson(produitJson));
      }
      return produits;
    } else {
      throw Exception('Impossible de charger les données.');
    }
  }

  @override
  Widget build(BuildContext context) {
    fetchProduits().then((value) {
      _produits.addAll(value);
    });
    return Container(
      child: Scaffold(
          appBar: AppBar(
              title: Text('Restaurant'),
              backgroundColor: Colors.amber,
              brightness: Brightness.light,
              actions: <Widget>[
                IconButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (BuildContext context) =>
                                new SearchWidget()));
                  },
                  icon: Icon(
                    Icons.search,
                    color: Colors.white,
                  ),
                  iconSize: 30,
                ),
                CartIconWithBadge(),
              ]),
          body: Container(
              child: ListView.builder(
            itemCount: _produits.length,
            itemBuilder: (BuildContext context, int i) {
              return Container(
                child: (_produits[i].category == categoryId),
              );
            },
          ))),
    );
  }
}

下面是类别列表的模型

    class Category {
  final int id;
  String name;
  String image;
  String slug;
  

  Category({this.id, this.name, this.image, this.slug,});

  factory Category.fromJson(Map<String, dynamic> json) {
    return Category(
      id: json['id'],
      name: json['name'],
      image: json['image'].toString(),
      slug: json['slug'],
      
    );
  }
}

class Produit {
  
  String productName;
  String productImage;
  int productPrice;
  String description;
  int rating;
  int numberOfRating;
  int category;

  Produit(
      {this.productName,
      this.productImage,
      this.productPrice,
      this.description,
      this.rating,
      this.numberOfRating,
      this.category});

  factory Produit.fromJson(Map<String, dynamic> json) {
    return Produit(
      productName: json['name'],
      productImage: json["image"],
      productPrice: json["prix"],
      description: json["description"].toString(),
      rating: json["rating"],
      numberOfRating: json["numberOfRating"],
      category: json["category"]
    );
  }
}

类别{
最终int id；
字符串名；
字符串图像；
管段塞；
类别（{this.id，this.name，this.image，this.slug，}）；
factory Category.fromJson（映射json）{
退货类别(
id:json['id']，
名称：json['name']，
image:json['image'].toString（），
slug:json['slug']，
);
}
}
类产品{
字符串名称；
字符串图像；
国际产品价格；
字符串描述；
国际评级；
国际数学家；
int类；
产品(
{this.productName，
这个产品形象，
这个价格，
这个.说明,，
这个.评级,，
这个数字，
这类}）；
factory Produit.fromJson（映射json）{
返回产品(
productName:json['name']，
productImage:json[“图像”]，
productPrice:json[“prix”]，
description:json[“description”].toString（），
评级：json[“评级”]，
numberOfRating:json[“numberOfRating”]，
类别：json[“类别”]
);
}
}

这是按类别显示产品列表的小部件

class ProduitPage extends StatefulWidget {
  ProduitPage({
    Key key,
    this.categoryId,
  }) : super(key: key);

  int categoryId;

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

class _ProduitPageState extends State<ProduitPage> {
  List<Produit> _produits = List<Produit>();

  

  Future<List<Produit>> fetchProduits() async {
    //var url = 'http://192.168.8.100:8000/api/produits';
    var url = apilink + prod_url;
    final response = await http.get(url);
    var produits = List<Produit>();

    if (response.statusCode == 200) {
      var produitsJson = json.decode(response.body);
      for (var produitJson in produitsJson) {
        produits.add(Produit.fromJson(produitJson));
      }
      return produits;
    } else {
      throw Exception('Impossible de charger les données.');
    }
  }

  @override
  Widget build(BuildContext context) {
    fetchProduits().then((value) {
      _produits.addAll(value);
    });
    return Container(
      child: Scaffold(
          appBar: AppBar(
              title: Text('Restaurant'),
              backgroundColor: Colors.amber,
              brightness: Brightness.light,
              actions: <Widget>[
                IconButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (BuildContext context) =>
                                new SearchWidget()));
                  },
                  icon: Icon(
                    Icons.search,
                    color: Colors.white,
                  ),
                  iconSize: 30,
                ),
                CartIconWithBadge(),
              ]),
          body: Container(
              child: ListView.builder(
            itemCount: _produits.length,
            itemBuilder: (BuildContext context, int i) {
              return Container(
                child: (_produits[i].category == categoryId),
              );
            },
          ))),
    );
  }
}

class ProduitPage扩展StatefulWidget{
产品页({
关键点，
这个，分类号，
})：super（key:key）；
int分类；
@凌驾
_ProduitPageState createState（）=>\u ProduitPageState（）；
}
类_ProduitPageState扩展状态{
列表_produits=List（）；
未来的fetchProduits（）异步{
//var url='1〕http://192.168.8.100:8000/api/produits';
var url=apilink+prod_url；
最终响应=等待http.get（url）；
var produits=List（）；
如果（response.statusCode==200）{
var produitsJson=json.decode（response.body）；
for（produitsJson中的var produitJson）{
add（Produit.fromJson（produitJson））；
}
退货产品；
}否则{
抛出异常（“不可能的错误”）；
}
}
@凌驾
小部件构建（构建上下文）{
fetchProduits（）。然后（（值）{
_产品添加全部（价值）；
});
返回容器(
孩子：脚手架(
appBar:appBar(
标题：文本（“餐厅”），
背景颜色：Colors.amber，
亮度：亮度，亮度，
行动：[
图标按钮(
已按下：（）{
导航器。推(
上下文
材料路线(
生成器：（BuildContext上下文）=>
新的SearchWidget（））；
},
图标：图标(
Icons.search，
颜色：颜色，白色，
),
iconSize:30，
),
CartIconWithBadge（），
]),
主体：容器(
子项：ListView.builder(
itemCount:_produits.length，
itemBuilder:（构建上下文，int i）{
返回容器(
子项：（_produits[i].category==categoryId），
);
},
))),
);
}
}

---

现在我想按所选类别显示数据。求你了，我真的需要你的帮助。谢谢

感谢您更新您的问题

虽然有很多方法可以实现您想要的结果，但我在下面提到了一种解决方案

由于小部件中有可用的产品列表，因此可以使用

list.where

方法按类别筛选产品列表，并在小部件中显示该功能的结果

注意：将直接调用build方法中的

API

函数替换为

FutureBuilder

小部件。上面的代码示例将在每个构建中调用

API

。

---

更多详细信息和示例代码，请访问

正在使用什么，firebase？欢迎访问StackOverflow:），您提出的问题范围非常大，因此如果不对应用程序进行假设，很难回答您的问题。为了得到一个有帮助的答案，我建议用你的小部件代码更新你的问题。另外，请明确是否要在客户端或服务器端运行此函数。@AmanVerma我使用的是laravel RESTful apijwt@RohanThacker我添加小部件代码