Cara Membuat Aplikasi Konversi Mata Uang di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat aplikasi konversi mata uang di flutter. Bagaimana caranya?, ayo ikuti tutorial selengkapnya di bawah ini.

Kita akan membuat aplikasi konversi mata uang dengan menggunakan api dari website app.freecurrencyapi.com. Aplikasinya cukup sederhana, hanya memiliki satu tampilan halaman. form input untuk mata uang dari, form input untuk mata uang ke, dan total uang yang akan dikonversi, lalu terdapat button dan hasilnya akan ditampilkan di bawah button. Untuk melihat hasil akhirnya silahkan scroll ke bagian paling bawah halaman ini.

Cara Membuat Aplikasi Konversi Mata Uang di Flutter

1. Pertama kalian harus mendaftar di website app.freecurrencyapi.com terlebih dahulu untuk mendapatkan apikey. Cara mendaftarnya cukup mudah dan simpel, kalian bisa menggunakan gmail untuk akses cepat.

2. Selanjutnya buatlah sebuah project flutter baru dengan nama yang kalian mau. Gunakan flutter versi 3+ atau versi yang mendukung null safety.

3. Selanjutnya buka file pubspec.yaml. Lalu tambahkan paket http: dan intl: ^0.18.1. Paket http berfungsi untuk melakukan request data ke server. Sedangkan paket intl berfungis untuk mermformat tanggal menjadi lebih mudah dipahami. Lihat contoh menambahkan paket pada gambar di bawah ini.

Menambahkan Paket

4. Buka file main.dart di dalam folder lib. Lalu ubah script di dalamnya dengan script di bawah ini.

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 adalah class yang digunakan untuk
  //mengelola input teks di dalam widget. Ini memungkinkan Anda untuk mengakses dan 
  //mengubah teks yang dimasukkan oleh pengguna dalam widget input teks tersebut.
  TextEditingController fromController = TextEditingController();
  TextEditingController toController = TextEditingController();
  TextEditingController totalController = TextEditingController();

  //metode untuk mengambil data dari internet
  Future<void> convert(base_currency, currencies) async {

    //endpoint yang dituju
    //endpotnt ini perlu apiKey, mata uang asal(base_currency), dan mata uang tujuan(currencie)
    var response = await http.get(
      Uri.parse(
        'https://api.freecurrencyapi.com/v1/latest?apikey=${apiKey}'
        '&base_currency=${base_currency}&currencies=${currencies},${base_currency}',
      ),
    );

    //setelah melakukan request http ubah setstate datanya
    setState(() {
      data = json.decode(response.body);

      //perhitungan sederhana untuk mendapatkan total konversi dari mata uang ke mata uang tertentu
      //dengan jumlah yang ditentukan
      hasilKonversi = int.parse(totalController.text) * data['data']['${currencies}'] / data['data']['${base_currency}'];
      isLoading = false; //untuk menghilangkan circular indicator
    });
  }

  @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, //wajib menggunakan flex untuk memberikan porsi pada widget lainnya
                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, //memberikan porsi untuk widget ini sebesar 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: 'Jumlah Uang',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                isLoading = true; // Aktifkan indikator progress
              });
              convert(fromController.text, toController.text);
            },
            child: isLoading
            ? CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(
                  Colors.white, // Ganti warna di sini
                ),
              ) // Tampilkan indikator saat isLoading true
            : Text('Convert'),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            'Hasil Konversi',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
          SizedBox(
            height: 10,
          ),
          data != null ? Column(
            //teks akan dimulai dari sebelah kiri
            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(
                'Waktu Konversi \n'
                '${DateFormat('dd-MM-yyyy HH:mm:ss').format(DateTime.now())}',
                style: TextStyle(fontSize: 20),
              ),
            ],
          ) : Text('Belum Ada Data')
        ],
      ),
    );
  }
}

5. Semua step sudah kita jalankan, silahkan buka emulator dan jalankan projectnya. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Kalian dapat melihat daftar currency yang tersedia disini https://freecurrencyapi.com/docs/currency-list. Kalian juga dapat melakukan modifikasi pada form input from dan form input to menjadi dropdownselect agar lebih mudah dalam pencarian currency. Tutorialnya di https://www.sahretech.com/2023/06/cara-membuat-dropdown-select-input-di.html

Sekian tutorial cara membuat aplikasi konversi mata uang di flutter. Semoga tutorial singkat ini bermanfaat. Jangan lupa comment dan share, sekian dan terima kasih.