title: How to fetch specific data from API into flutter app
body: <p>I am a beginner in flutter.</p>
  <p>I have created two ListView Builder where one ListView.builder is inside another builder as given below.
  I have a list of categories which is inside one listview.builder and other are the list of products which  also listview.builder Wrapped inside the above listview build&gt;
  So now i need to display the only items belonging to the 1st listview builder which means If I have a categories named soup (1st ListView.builder) Now i need to display only the products that belongs to soup categories from 2nd Listview.Builder but all the products are listed inside all the categories list. So, Please help me to find solution any help would be appriciated.Thank you in advance.
  Below are the codes.</p>
  <pre><code>//lib/routes/menu_description.dart(File name)
  import 'package:flutter/material.dart';
  import '../api_service.dart';
  import 'package:html/parser.dart';
  import 'package:percent_indicator/percent_indicator.dart';
  
  class MenuDescription extends StatefulWidget {
    MenuDescription({Key key}) : super(key: key);
  
    @override
    _MenuDescriptionState createState() =&gt; _MenuDescriptionState();
  }
  
  int itemspressed;
  
  class _MenuDescriptionState extends State&lt;MenuDescription&gt; {
    @override
    Widget build(BuildContext context) {
      return Container(
        // color: Colors.grey[200],
        child: FutureBuilder(
          future: fetchWpPosts(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.separated(
                separatorBuilder: (context, index) =&gt; Divider(
                  height: 20.0,
                  color: Colors.black,
                ),
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int index) {
                  Map wpcategoriespost = snapshot.data[index];
                  return Container(
                    color: Colors.grey[200],
                    child: InkWell(
                      splashColor: Colors.grey[800],
                      onTap: () {
                        setState(() {
                          itemspressed = index;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.only(
                            left: 5, right: 5, bottom: 5, top: 15),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Center(
                              child: Text(
                                &quot;${wpcategoriespost['name']}&quot;,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize: 16.0,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.lightGreen[900],
                                ),
                              ),
                            ),
                            Center(
                              child: Text(
                                parse((&quot;${wpcategoriespost['description']}&quot;)
                                        .toString())
                                    .documentElement
                                    .text,
                                style:
                                    TextStyle(fontSize: 14, color: Colors.black),
                              ),
                            ),
                            Container(
                                padding: EdgeInsets.only(top: 20.0),
                                child: Categories(),)
                          ],
                        ),
                      ),
                    ),
                  );
                },
              );
            }
            return new CircularPercentIndicator(
                radius: 120.0,
                lineWidth: 13.0,
                animation: true,
                percent: 1.0,
                progressColor: Colors.orange,
                center: new Text(
                  &quot;100.0%&quot;,
                  style:
                      new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
                ));
          },
        ),
      );
    }
  }
  
  class Categories extends StatefulWidget {
    @override
    _CategoriesState createState() =&gt; _CategoriesState();
  }
  
  class _CategoriesState extends State&lt;Categories&gt; {
    @override
    Widget build(BuildContext context) {
      return Container(
        child: FutureBuilder(
          future: fetchWpPosts(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                physics: NeverScrollableScrollPhysics(),
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int index) {
                  Map wppost = snapshot.data[index]; 
                  
                  return Card(
                    margin: const EdgeInsets.only(
                      left: 15,
                      right: 15,
                      bottom: 15,
                    ),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5),
                    ),
                    elevation: 3,
                    
                    child: InkWell(
                      splashColor: Colors.grey[300],
                      onTap: () {
                        setState(() {
                          itemspressed = index;
                        });
                      },
                      
                      child: Padding(
                        padding: const EdgeInsets.only(
                            left: 12, right: 5, bottom: 12, top: 5),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  &quot;${wppost['name']}&quot;,
                                  style: TextStyle(
                                      fontSize: 16.0,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.lightGreen[900]),
                                ),
                                Container(
                                  height: 40,
                                  width: 40,
                                  decoration: BoxDecoration(
                                    shape: BoxShape.rectangle,
                                    border: Border.all(color: Colors.grey[350]),
                                    color: itemspressed == index
                                        ? Colors.grey[350]
                                        : null,
                                  ),
                                  child: IconButton(
                                    iconSize: 22,
                                    icon: Icon(
                                      Icons.add,
                                      color: Colors.blueAccent[400],
                                    ),
                                    onPressed: () {
                                      setState(() {});
                                      print('Add to cart');
                                    },
                                  ),
                                ),
                              ],
                            ),
                            Text(
                              parse((&quot;${wppost['description']}&quot;).toString())
                                  .documentElement
                                  .text,
                              style: TextStyle(fontSize: 14, color: Colors.black),
                            ),
                            Text(
                              parse((&quot;${wppost['price']} €&quot;).toString())
                                  .documentElement
                                  .text,
                              style: TextStyle(
                                  fontSize: 15,
                                  color: Colors.amber[700],
                                  fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ) ;
  
                },
              );
            }
            return new CircularPercentIndicator(
                radius: 120.0,
                lineWidth: 13.0,
                animation: true,
                percent: 1.0,
                progressColor: Colors.orange,
                center: new Text(
                  &quot;100.0%&quot;,
                  style:
                      new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
                ));
          },
        ),
      );
    }
  }
  
  //lib/api_service.dart
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  
  Future&lt;List&gt; fetchWpPosts() async{
  final response = await http.get('https://word.tkco.in/wp-json/wc/v3/products?consumer_key=ck_94114a31e4576e61a9292f961489e7701029753e&amp;consumer_secret=cs_dd4dc6e7945d8dcd14d888bc1d0ea0806b116dfb');
  var convertDatatoJson = jsonDecode(response.body);
  
  if (response.statusCode == 200) {
  }
  
  return convertDatatoJson;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/BWhq0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BWhq0.png" alt="Categories at Top which is made from ListVIew.builder and 2nd ITems(products) are made from another ListView.builder which is inside 1st ListView.builder" /></a></p>
  <p><a href="https://i.stack.imgur.com/c7rtF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c7rtF.png" alt="all the products are also extracted where I only need specific products according to categories" /></a></p>