Get json Data from Rapid API in Flutter (Dart)

Question

I managed to load the data from a Json File which is local on my Flutter Project. I also was able to fetch Data from the Internet, if the API Url was like:

https://[API-Server][parameter1:xy][parameter2:abc][API-KEY:lasgoewrijeowfjsdfdfiia]

I archieved that with this code sample:

  Future<String> _loadStringFixtures() async {
    return await rootBundle.loadString('assets/fixtures.json');
  }

  Future loadFixtures() async {
    String jsonString = await _loadStringFixtures();
    final jsonResponse = json.decode(jsonString);
    FixturesAPI value = new FixturesAPI.fromJson(jsonResponse);
    return value;
  }

So far so good...

But now I am facing a problem with the API Provider RapidAPI You can find the documentation etc. here: https://rapidapi.com/api-sports/api/api-football/endpoints

As you can see they give some code snippets to connect to their API. There are some for C, C#, Java, Python etc. You can look into all of them with the link above. Sadly there is no example for Flutter. And I do not see a way to adapt these examples.

Normally you can paste your API Key directly into the URL, but this seems not possible here? Or maybe it is?

Does Flutter also have other possibilities to receive data from an API besides the one I did?

Thank you so much in advance for your help!

Answer 1

It's possible to with http package and very easy. You can see in this example below...

import 'dart:convert';

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

class APIService {
  // API key
  static const _api_key = <YOU-API-KEY-HERE>;
  // Base API url
  static const String _baseUrl = "api-football-beta.p.rapidapi.com";
  // Base headers for Response url
  static const Map<String, String> _headers = {
    "content-type": "application/json",
    "x-rapidapi-host": "api-football-beta.p.rapidapi.com",
    "x-rapidapi-key": _api_key,
  };

  // Base API request to get response
  Future<dynamic> get({
    @required String endpoint,
    @required Map<String, String> query,
  }) async {
    Uri uri = Uri.https(_baseUrl, endpoint, query);
    final response = await http.get(uri, headers: _headers);
    if (response.statusCode == 200) {
      // If server returns an OK response, parse the JSON.
      return json.decode(response.body);
    } else {
      // If that response was not OK, throw an error.
      throw Exception('Failed to load json data');
    }
  }
}

Then get you request:

//....
APIService apiService = APIService();
// You future
Future future;
//in the initState() or use it how you want...
future = apiService.get(endpoint:'/fixtures', query:{"live": "all"});

//....

Answer 2

Yes it possible in flutter. Use the Dio Package in flutter which is a powerful Http client. Using dio you can set interceptors to add api key to url so you don't have to append it in every request. Setting interceptors will help you.