title: Flutter load api data on scroll
body: <p>I have created an API to get products data from the database like this:</p>
  
  <pre><code> [
    {
     "id": 1,
     "product_name": "Name1",
     "color": "red"
    },
    {
     "id": 2,
     "product_name": "Name2",
     "color": "green"
    },
    {
     "id": 3,
     "product_name": "Name3",
     "color": "blue"
    }
   ]
  </code></pre>
  
  <p>So I'm fetching the data from the <em>main.dart</em> when the app lunch</p>
  
  <pre><code>/// Get Stocks data from database
  Future&lt;String&gt; getData() async {
    var response = await http.get(url);
  
    if (response.statusCode == 200) {
  // If server returns an OK response, parse the JSON.
      data = utf8.decode(response.bodyBytes);
      return data;
  
    } else {
  // If that response was not OK, throw an error.
      throw Exception('Failed to load Stocks');
    }
  }
  </code></pre>
  
  <p><strong>How can I make the items load one by one when the user scroll to view more products?</strong></p>