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.

Preview

Without Borders	With Borders

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.5

or

flutter pub add currency_input_field

Usage

Import the CurrencyInputField widget into your Dart file:

import 'package:currency_input_field/currency_input_field.dart';

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),
        ),
      ],
    );
  }
}

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'
  ),
  amountInputDecoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Amount',
    hintText: 'Enter Amount'
  ),
  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),
),

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;
  },
),

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.