Get API Endpoints/URL
Follow this link for endpoint and API KEY . To get free API Key, enter your email and click on the get API Button on the page. To get response add your API key to the endpoint provided. Add endpoint to your browser or any tool to view the response.
https://rest.coinapi.io/v1/exchangerate/BTC/USD \https://rest.coinapi.io/v1/exchangerate/BTC/USD?apikey=yourapikey
Coin API Response sample
sample of a response from the endpoint
Fetch data to our flutter App with BTC and USD in the URL/Endpoint
Fetch exchange rate price in dollars from coin API in our flutter APP. The function below will only fetch the rate for BTC in USD, since this is what is in our URL endpoint.
Display data in the UI
Add the rate value to our flutter widget
Create a function to call the getRate() function in the currency class from our widget class. The variable rate data will display the rate from the API response. You can declare the rateData variable outside the method in-order to access it in a widget.
To get other more data from the endpoint in the getRateData() function for a specific currency.
dynamic data = await Currency().getRate();
double rate = data['rate'];
String base = data['asset_id_base'];
String quote = data['asset_id_quote '];N.B Edit the getRate() function in currency class to return the response body and not the rate.
var decodedData = jsonDecode(response.body);
return decodedData;Fetch data Using custom quote(currency)
Pass the currency to the endpoint from our widget. The user will be able to select a currency from a drop down list.
Add Custom quote(currency) to the endpoint
We can pass the custom quote(currency) as a variable to the endpoint. This enables us to manipulate data without changing the endpoint every time.The variable will start with $var. In the example below $currencySelected and $apikey are all variables.
'https://rest.coinapi.io/v1/exchangerate/BTC/$currencySelected?apikey=$apiKey';We need to edit our getRate() function to enable us to pass the custom currency from our widget(drop down). Passing the selectedCurrency variable as the function parameter will prompt us to pass the currency to the function when we call the function in our widget.
Create a const class or add the currency list to the top of widget class.
const List<String> currenciesList = [
'AUD','BRL','CAD','CNY','EUR','GBP','HKD','IDR','ILS','INR','JPY','M XN','NOK','NZD','PLN','RON','RUB','SEK','SGD','USD','ZAR'
];Fetch the rate of BTC in difference currencies from UI
The UI. You can select different currencies from the drop-down to check the rates.
Fetch the rate of 3 crypto(BTC, ETH, LTC) and its value in currency
To get the value of the three crypto in the currency, we need to create a loop through the data returned(rate-value in currency) for each of the crypto. We need to pass the crypto as a variable in our end-point for this to succeed.
///edit endpoint 'https://rest.coinapi.io/v1/exchangerate/$crypto/$currencySelected?apikey=$apiKey';
Get the rate for each crypto, we will loop through the endpoint/URL with a list containing our crypto. Each loop/cycle will return the rate of the crypto according to its index in the list. The values will be stored in a map.
const List<String> cryptoList = [
'BTC','ETH','LTC',
];Function to loop through the cryptoList
To retrieve a key from a map, lets look at an example below. To print/get the value of a key, we will pass the key to our map and it will print its value. This is the concept we will use to get the value of each crypto from the map.
void main(){var results = {
'usd' : 3.80,
'eth' : 4.10,
'lct' : 4.90,
};print(results['usd']); //3.80
}
display the values in a widget
I refactored the card containing the crypto and currency values since we will be reusing the same card for the three cryptos.Refactoring is a technique consists of returning just a widget to the call of a method by its signature. Read more on refactoring
Results
