Flutter – How to implement thisf list with listview.builder

In this cause you should make model class for manage our API response data, and you should keep your mind we cannot access dynamic data with listView builder we want use Future builder with random data like API call,

1.First we should make our model class like bellow,

class Product {
  final String productName;

  Product({required this.productName});

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      productName: json['productName'],
    );
  }
}

2.Look at bellow API data fetch part,

 Future<List<Product>> fetchProducts() async {
    final response = await http.get(Uri.parse('YOUR_API_ENDPOINT'));

    if (response.statusCode == 200) {
      // If the server returns a 200 OK response, parse the JSON
      List<dynamic> responseData = json.decode(response.body);
      List<Product> productList = [];
      for (dynamic data in responseData) {
        productList.add(Product.fromJson(data));
      }
      return productList;
    } else {
      // If the server did not return a 200 OK response,
      // throw an exception.
      throw Exception('Failed to load products');
    }
  }

you should learn asynchronous programming know about async and wait keywords, read flutter documentation get more details you can read it using this

3.Now we can pass our data into list, like bellow.

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Product>>(
      future: fetchProducts(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else {
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(snapshot.data![index].productName),
              );
            },
          );
        }
      },
    );
  }

• fetchProducts() makes an HTTP GET request to your API endpoint.
  Replace 'YOUR_API_ENDPOINT' with the actual URL of your API
  endpoint.

• If the request is successful (status code 200), it parses the JSON
  response and creates a list of Product objects.
  If an error occurs during the request or parsing, it throws an exception which is caught by the FutureBuilder and displayed as an
  error message.

in this implementation will be help fix your issue, and I attach new link for learn fetch data from internet, use this link for read it.