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.
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}¤cies=${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.
0 Comments
Come on ask us and let's discuss together
Emoji