Hello everyone, welcome back at porkaone. On this occasion we will learn how to create a currency conversion application in Flutter. How do you do it? Come on, follow the complete tutorial below.

We will create a currency conversion application using the api from the website app.freecurrencyapi.com. The application is quite simple, it only has one page display. input form for currency from, input form for currency to, and total money to be converted, then there is a button and the results will be displayed below the button. To see the final results, please scroll to the bottom of this page.

How to Create a Currency Conversion App in Flutter

1. First, you have to register on the website app.freecurrencyapi.com to get the apikey. How to register is quite easy and simple, you can use Gmail for quick access.

2. Next, create a new flutter project with the name you want. Use flutter version 3+ or a version that supports null safety.

3. Next, open the pubspec.yaml file. Then add the http: and intl: ^0.18.1 packages. The http package functions to make data requests to the server. Meanwhile, the intl package functions to format the date to make it easier to understand. See an example of adding a package in the image below.

Add Package

4. Open the main.dart file in the lib folder. Then change the script in it with the script below.

import 'dart:convert';

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

void main() {
  runApp(
    MaterialApp(
      //menghilangkan debug di kanan atas
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  //inisialisasi variabel
  var apiKey = 'fca_live_xtFj0eIq32x9YL7pTsdsScDLNsWTfHOE0ppapTmE';
  dynamic data;
  bool isLoading = false;
  var hasilKonversi;

  TextEditingController fromController = TextEditingController();
  TextEditingController toController = TextEditingController();
  TextEditingController totalController = TextEditingController();

  //this method for get data from the internet
  Future<void> convert(base_currency, currencies) async {

    //the destination endpoint
    //you must have api key
    var response = await http.get(
      Uri.parse(
        'https://api.freecurrencyapi.com/v1/latest?apikey=${apiKey}'
        '&base_currency=${base_currency}&currencies=${currencies},${base_currency}',
      ),
    );


    setState(() {
      data = json.decode(response.body);

      hasilKonversi = int.parse(totalController.text) * data['data']['${currencies}'] / data['data']['${base_currency}'];
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Conversion'),
      ),
      body: ListView(
        padding: EdgeInsets.all(10),
        children: [
          Row(
            children: [
              Expanded(
                flex: 1, 
                child: Container(
                  height: 70,
                  child: TextFormField(
                    controller: fromController,
                    decoration: const InputDecoration(
                      labelText: 'From',
                    ),
                  ),
                ),
              ),
              SizedBox(
                width: 20,
              ),
              Icon(Icons.repeat),
              SizedBox(
                width: 20,
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 70,
                  child: TextFormField(
                    controller: toController,
                    decoration: const InputDecoration(
                      labelText: 'To',
                    ),
                  ),
                ),
              ),
            ],
          ),
          Container(
            height: 70,
            child: TextFormField(
              keyboardType: TextInputType.number,
              controller: totalController,
              decoration: const InputDecoration(
                labelText: 'Amount of money',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                isLoading = true; // Activate the progress indicator
              });
              convert(fromController.text, toController.text);
            },
            child: isLoading
            ? CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(
                  Colors.white, // Change color here
                ),
              ) // Show indicator when isLoading is true
            : Text('Convert'),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            'Hasil Konversi',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
          SizedBox(
            height: 10,
          ),
          data != null ? Column(
         
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '1 ${fromController.text} = ${data['data']['${toController.text}']} ${toController.text} \n'
                '${totalController.text} ${fromController.text} = ${hasilKonversi} ${toController.text} \n',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                'Conversion Time \n'
                '${DateFormat('dd-MM-yyyy HH:mm:ss').format(DateTime.now())}',
                style: TextStyle(fontSize: 20),
              ),
            ],
          ) : Text('Belum Ada Data')
        ],
      ),
    );
  }
}

5. We have carried out all the steps, please open the emulator and run the project. If successful, the display will look like the image below.

You can see the list of available currencies here https://freecurrencyapi.com/docs/currency-list. You can also modify the input from form and input to form to become a dropdown select to make it easier to search for currencies.

That's the tutorial on how to create a currency conversion application in Flutter. Hopefully this short tutorial is useful. Don't forget to comment and share, that's all and thank you.