currency_input_field

Description:

currency input field

Currency Input Field #




A customizable Flutter widget for inputting currency and amount values. This widget is designed to provide an intuitive and user-friendly way to input currency types and their corresponding amounts with validation.
Features #

Dropdown selection for currencies
Numeric input field for amounts
Customizable hint texts
Validation for amount input
Seamless integration with other Flutter components

Installation #
Add the following dependency to your pubspec.yaml file:
dependencies:
currency_input_field: ^0.0.4
copied to clipboard
or #
flutter pub add currency_input_field
copied to clipboard
Usage #
Import the CurrencyInputField widget into your Dart file:
import 'package:currency_input_field/currency_input_field.dart';
copied to clipboard
Example #
Here is a simple example of how to use the CurrencyInputField widget:
import 'package:flutter/material.dart';
import 'package:currency_input_field/currency_input_field.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Currency Amount Input Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: CurrencyInputExample(),
),
),
);
}
}

class CurrencyInputExample extends StatefulWidget {
@override
_CurrencyInputExampleState createState() => _CurrencyInputExampleState();
}

class _CurrencyInputExampleState extends State<CurrencyInputExample> {
String selectedCurrency = 'ZMW';
double enteredAmount = 0.0;

@override
Widget build(BuildContext context) {
return Column(
children: [
CurrencyInputField(
currencyHintText: "Currency",
monetaryHintText: "Amount",
currencies: ['ZMW', 'MWK', 'KES', 'ZAR', 'BWP', 'GBP', 'ZWL', 'USD'],
onCurrencyChanged: (currency) {
setState(() {
selectedCurrency = currency;
});
print('Selected currency: $currency');
},
onAmountChanged: (amount) {
setState(() {
enteredAmount = amount;
});
print('Entered amount: $amount');
},
validateAmount: (value) {
if (value == null || value.isEmpty) {
return 'Please enter an amount';
}
final amount = double.tryParse(value);
if (amount == null || amount <= 0) {
return 'Please enter a valid amount';
}
return null;
},
),
SizedBox(height: 20.0),
Text(
"Selected Currency: $selectedCurrency",
style: TextStyle(fontSize: 16.0),
),
Text(
"Entered Amount: $enteredAmount",
style: TextStyle(fontSize: 16.0),
),
],
);
}
}
copied to clipboard
Preview #
Without Borders

With Borders

Customizations #
CurrencyInputField(
currencyHintText: "Select Currency",
monetaryHintText: "Enter Amount",
currencies: ['USD', 'EUR', 'JPY', 'GBP'],
onCurrencyChanged: (currency) {
// Handle currency change
},
onAmountChanged: (amount) {
// Handle amount change
},

// Applying customizations
currencyInputDecoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Currency',
hintText: 'Currency',
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
),
amountInputDecoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Amount',
hintText: 'Enter Amount',
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
),
currencyTextStyle: TextStyle(
fontSize: 16.0,
color: Colors.blueAccent,
),
amountTextStyle: TextStyle(
fontSize: 16.0,
color: Colors.green,
),

// Default is 16.0, However you can change it to any value
spacingBetweenFields: EdgeInsets.symmetric(horizontal: 20.0),
),
copied to clipboard
Advanced Usage #
CurrencyInputField(
currencyHintText: "Select Currency",
monetaryHintText: "Enter Amount",
currencies: ['USD', 'EUR', 'JPY', 'GBP'],
onCurrencyChanged: (currency) {
// Handle currency change
},
onAmountChanged: (amount) {
// Handle amount change
},
validateAmount: (value) {
if (value == null || value.isEmpty) {
return 'Please enter an amount';
}
final amount = double.tryParse(value);
if (amount == null || amount <= 0) {
return 'Please enter a valid amount';
}
return null;
},
),

copied to clipboard
Parameters #



Parameter
Description




currencyHintText
The hint text for the currency dropdown


monetaryHintText
The hint text for the amount input field


currencies
The list of currency codes to be displayed in the dropdown


onCurrencyChanged
A callback function that is called when the currency is changed


onAmountChanged
A callback function that is called when the amount is changed


validateAmount
A function that validates the amount input field



License #
This project is licensed under the MIT License - see the LICENSE file for details.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter