Flutter: API — Currency Converter App

This Currency Converter takes the currency of Brazil, the Real and then calculates its value in USD and Euro. An API is used to provide the exchange rate between the Real , USD and Euro.

This was one of the first Flutter apps that I worked on and I think it is a great project for those starting out with the framework. It shows in a simple way how data can be called from an API in Flutter.

Setting up the Project

Let’s make a Flutter project named currency_converter and remove all the default code leaving just an AppBar and blank screen.

import 'package:flutter/material.dart';


void main() {
  runApp(MaterialApp(
    home: Home(),
    theme: ThemeData(
        hintColor: Colors.amber,
        primaryColor: Colors.white  
    ),
  ));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(
      title: Text('Currency Converter'),
      centerTitle: true,
    ),);
  }
}

The structure

The Currency Converter screen will display either a text saying “Loading” , a text saying “Error” or it will consist of a Column widget that contains an Icon and two TextFields widgets as children. This depends if the Future is completed or not.

It is here that we encounter a situation whereby we need to call some service asynchronously but render the result on front end. To make this possible Flutter has the Future Builder class.

Future Builder

In simple terms , Future Builder calls a future function, then waits for the result. As soon as result appears , it executes the builder function, wherein we build a widget.

At this point you should create your own API key from :

https://hgbrasil.com/status/finance

const request = "https://api.hgbrasil.com/finance?format=json&key=80f27c39";
Future<Map> getData() async {
  http.Response response = await http.get(request);
  return json.decode(response.body);
}
body: FutureBuilder(
    future: getData(),
    builder: (context, snapshot) {
      switch (snapshot.connectionState) {
        case ConnectionState.none:
        case ConnectionState.waiting:
          return Center(
              child: Text(
            "Loading...",
            style: TextStyle(color: Colors.amber, fontSize: 25.0),
            textAlign: TextAlign.center,
          ));
        default:
          if (snapshot.hasError) {
            return Center(
                child: Text(
              "Error :(",
              style: TextStyle(color: Colors.amber, fontSize: 25.0),
              textAlign: TextAlign.center,
            ));
          } else {
            dollar_buy =
                snapshot.data["results"]["currencies"]["USD"["buy"];
            euro_buy =
                snapshot.data["results"]["currencies"]["EUR"["buy"];
            return SingleChildScrollView(
                child: Column(
              children: <Widget>[
                Icon(Icons.monetization_on,
                    size: 150.0, color: Colors.amber),
                buildTextField(
                    "Reals", "R\$", realController, _realChanged),
                Divider(),
                buildTextField(
                    "Dollars", "US\$", dolarController, _dolarChanged),
                Divider(),
                buildTextField(
                    "Euros", "€", euroController, _euroChanged),
              ],
            ));
          }
      }
    }),

Now lets get this app functional with Dart…

We initially declared two double variables dollar_buy and euro_buy to store the Real to Euro and Real to Dollar conversion rate, which parses through the data received via API as follows:

dollar_buy =
//here we pull the us and eu rate
    snapshot.data["results"]["currencies"]["USD"]["buy"];
euro_buy =
    snapshot.data["results"]["currencies"]["EUR"]["buy"];

We then create a function for each currency , that calculates the conversion between the currencies, as follows:

void _realChanged(String text) {
  if (text.isEmpty) {
    _clearAll();
    return;
  }
  double real = double.parse(text);
  dolarController.text = (real / dollar_buy).toStringAsFixed(2);
  euroController.text = (real / euro_buy).toStringAsFixed(2);
}

void _dolarChanged(String text) {
  if (text.isEmpty) {
    _clearAll();
    return;
  }
  double dolar = double.parse(text);
  realController.text = (dolar * this.dollar_buy).toStringAsFixed(2);
  euroController.text =
      (dolar * this.dollar_buy / euro_buy).toStringAsFixed(2);
}

void _euroChanged(String text) {
  if (text.isEmpty) {
    _clearAll();
    return;
  }
  double euro = double.parse(text);
  realController.text = (euro * this.euro_buy).toStringAsFixed(2);
  dolarController.text =
      (euro * this.euro_buy / dollar_buy).toStringAsFixed(2);
}

The App works aa seen in the below video:

The complete project is available on GitHub at this link:

zorgonred/Flutter_Currency_Converter

Thank you for reading! Feel free to make any other suggestions or recommendations for future challenges. Leave a few claps if you enjoyed it !

Credit: https://www.udemy.com/course/curso-completo-flutter-app-android-ios/