Multiple API calls in Flutter

Multiple provider use on a single page in Flutter.

If you have multiple APIs that take different amounts of time to complete, you can use different provider types to handle them.

For example, you could use a FutureProvider for an API call that returns data that takes some time to fetch, and a ValueListenableProvider for an API call that returns data that is updated frequently and quickly. Here’s an example of how you could use both FutureProvider and ValueListenableProvider on a single page:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

// Define a model class to represent the data returned by the APIs
class Product {
  final int id;
  final String name;
  final double price;

  Product({required this.id, required this.name, required this.price});

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

// Define a provider class to manage the slow API call and store the response data
class SlowApiProvider {
  Future<List<Product>> fetchProducts() async {
    // Simulate a long API call
    await Future.delayed(Duration(seconds: 5));
    final response = await http.get(Uri.parse('https://researchthinker.com/products/slow'));
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body) as List<dynamic>;
      return data.map((json) => Product.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load products');
    }
  }
}

// Define a provider class to manage the fast API call and store the response data
class FastApiProvider {
  final ValueNotifier<List<Product>> products = ValueNotifier([]);

  Future<void> fetchProducts() async {
    final response = await http.get(Uri.parse('https://researchthinker.com/products/fast'));
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body) as List<dynamic>;
      products.value = data.map((json) => Product.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load products');
    }
  }
}

// Define a widget that uses the product data from both providers
class ProductListWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final slowProducts = Provider.of<List<Product>>(context);
    final fastProducts = Provider.of<FastApiProvider>(context).products;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (slowProducts == null) CircularProgressIndicator(),
            if (fastProducts.value.isEmpty)
              ElevatedButton(
                onPressed: () => Provider.of<FastApiProvider>(context, listen: false).fetchProducts(),
                child: Text('Load Fast Products'),
              ),
            if (slowProducts != null)
              Expanded(
                child: ListView.builder(
                  itemCount: slowProducts.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(slowProducts[index].name),
                      subtitle: Text('\$${slowProducts[index].price}'),
                    );
                  },
                ),
              ),
            if (fastProducts.value.isNotEmpty)
              Expanded(
                child: ListView.builder(
                  itemCount: fastProducts.value.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(fastProducts.value[index].name),
                      subtitle: Text('\$${fastProducts.value[index].price}'),
                    );
                  },
                ),
              ),
          ],
        ),
      ),
    );
  }
}

// Use SlowApiProvider, FastApiProvider, and ProductListWidget