CODEWITHSUNDEEP
androidjsonflutterflutter-futurebuilder
Purna Satya
Purna Satya

Reputation: 173

How to build a API call in flutter with response being used across multiple screens using future builder

I have done a quite a good research and unable to find a good tutorial for flutter. but here is what I am trying to do.

I have an API call which gets me a lot of data and this data should be shown across multiple screens.

What is the best way to do it using futurebuilder. Ideally, I would like to call the API in the splash screen and the save the data and use it across multiple screens, but not able to get a good tutorial to do it.

Editing to Add the code.

Future<ApiCallResponse> makeApiCall({
    required String callName,
    required String apiUrl,
    required ApiCallType callType,
    Map<String, dynamic> headers = const {},
    Map<String, dynamic> params = const {},
    String? body,
    BodyType? bodyType,
    bool returnBody = true,
    bool cache = false,
  }) async {
    print(apiUrl);
  //  print(body);
    print(params);
    final callRecord =
        ApiCallRecord(callName, apiUrl, headers, params, body, bodyType);
    // Modify for your specific needs if this differs from your API.
    if (_accessToken != null) {
      headers[HttpHeaders.authorizationHeader] = 'Token $_accessToken';
    }
    if (!apiUrl.startsWith('http')) {
      apiUrl = 'https://$apiUrl';
    }

    // If we've already made this exact call before and caching is on,
    // return the cached result.
    if (cache && _apiCache.containsKey(callRecord)) {
      return _apiCache[callRecord]!;
    }

    ApiCallResponse result;
    switch (callType) {
      case ApiCallType.GET:
      case ApiCallType.DELETE:
        result =
            await urlRequest(callType, apiUrl, headers, params, returnBody);
        break;
      case ApiCallType.POST:
      case ApiCallType.PUT:
      case ApiCallType.PATCH:
        result = await requestWithBody(
            callType, apiUrl, headers, params, body, bodyType, returnBody);
        break;
    }

    // If caching is on, cache the result (if present).
    if (cache) {
      _apiCache[callRecord] = result;
    }

 //   print(result.jsonBody);
 //   print(result.jsonBody['abhijit']);
 //   print(result.jsonBody['gowri']);

//    final prefs = await SharedPreferences.getInstance();
//    await prefs.setStringList('gowri', result.jsonBody['gowri']);
//    await prefs.setStringList('gouri', result.jsonBody['gouri']);

    SaveDataResponse(result);

    return result;
  }

void SaveDataResponse(ApiCallResponse result) async{
  String SunriseData = result.jsonBody['sunrise'].toString();
//  String gouriVal = result.jsonBody['gouri'].toString();

  print(SunriseData);
//  print(gouriVal);

   final prefs = await SharedPreferences.getInstance();
    prefs.setString('sunrise', SunriseData);
//    await prefs.setString('sunrise', SunriseData);
}

When I try to use the following inside the initstate on the page where I want to see the data

sunrise= SharedPref.getString('SunriseData') as String?;

I get the following message

Unhandled Exception: type 'Future<String>' is not a subtype of type 'String?' in type cast
E/flutter (18953): #0      _HomePageWidgetState._loadlatlon.<anonymous closure> (package:myApp/home_page/home_page_widget.dart:62:50)
E/flutter (18953): #1      State.setState (package:flutter/src/widgets/framework.dart:1114:30)
E/flutter (18953): #2      _HomePageWidgetState._loadlatlon (package:myApp/home_page/home_page_widget.dart:59:5)
E/flutter (18953): <asynchronous suspension>

Upvotes: 0

Views: 747

Answers (2)

Gwhyyy
Gwhyyy

Reputation: 9196

try changing this in your initState():

sunrise= SharedPref.getString('SunriseData') as String?;

with this:

SharedPref.getString('SunriseData').then((value) {
  print(value);
  sunrise = value;
   SetState(() {});
 });

Upvotes: 0

Gwhyyy
Gwhyyy

Reputation: 9196

make a separate class, as Example:

class DataClass {
 static List allData = [];
 }

now in the first Future method that you will request that data from do something like this:

Future futureRequestMethod() async {

// here is the code that you will request the data with in the end as example:
 final resultOfRequest = snapshot.data;

 DataClass.allData = resultOfRequest;

return resultOfRequest;
}

in the future method which will be assigned to the future property of FutureBuilder, assign the data in the DataClass.allData then return it.

now you saved that data on the class and the FutureBuidlder will work fine.

then on your next screens without making a new request, you can use that allData directly

// on other screens
// print(DataClass.allData);

Upvotes: 1

Related Questions