I am trying to fetch collection from shopify admin api with rest api in flutter

Question

I am Using flutter with http package. in my code CircularProgressIndicator() is running and is not showing any error here is my http request code

import 'package:http/http.dart' as http;
import 'dart:convert';`

class Collections {
  Future<List> getAllCollections() async {
    var headers = {
      'Content-Type': 'application/json',
      'X-Shopify-Access-Token': '{token}',
    };
    var url = Uri.parse(
        'https://{shop}.myshopify.com/admin/api/2022-07/collections.json');
    try {
      var res = await http.get(url, headers: headers);
      print(res);
      if (res.statusCode == 200) {
        return jsonDecode(res.body);
      } else {
        return Future.error("Server Error");
      }
    } catch (SocketException) {
      return Future.error("Error Fetching Data");
    }
  }
}

and here I created the object of this class and using it.

class ProCategories extends StatefulWidget {
  const ProCategories({Key? key}) : super(key: key);

  @override
  State<ProCategories> createState() => _ProCategoriesState();
}

class _ProCategoriesState extends State<ProCategories> {
  Collections collections = Collections();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Categories"),
        centerTitle: true,
        foregroundColor: Colors.black,
        backgroundColor: Colors.white,
      ),
      body: Container(
        margin: EdgeInsets.only(top: 8.0),
        child: FutureBuilder<List>(
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              if (snapshot.data?.length == 0) {
                return Center(
                  child: Text("0 Collections"),
                );
              }
              return ListView.builder(
                  itemCount: snapshot.data?.length,
                  itemBuilder: (context, index) {
                    return Card(
                      child: ListTile(
                        title: Row(
                          children: [
                            Expanded(
                              child: Container(
                                child: Text(
                                  snapshot.data![index]['collections']['edges']
                                      ['node']['title'],
                                  style: TextStyle(
                                      fontSize: 25,
                                      fontWeight: FontWeight.bold),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  });
            } else if (snapshot.hasError) {
              return Center(
                child: Text(snapshot.error.toString()),
              );
            } else {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ),
      ),
    );
  }
}

Answer 1

Add future to FutureBuilder .

late Future<List> getAllCollections;

@override
void initState() {
  super.initState();
  getAllCollections = collections.getAllCollections();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
...
    body: Container(
      margin: EdgeInsets.only(top: 8.0),
      child: FutureBuilder<List>(
        future: getAllCollections,
        builder: (context, snapshot) {
...
        },
      ),
    ),
  );
}

See Fetch data from the internet for the full example.