How to Create a Currency Conversion App in Flutter

How to Create a Currency Conversion App in Flutter
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 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 to get the apikey. How to register is quite easy and simple, you can use Gmail for quick access.
website konversi - sahretech

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.
Menambahkan Paket di Flutter - sahretech
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( '${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(}', 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 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.

Post a Comment