currency_widget - Dart API docs

A flexible Flutter package that provides a collection of widgets for easy currency selection and formatted currency input.

Overview

This package simplifies the process of handling currency-related UI in your Flutter applications. It includes widgets for picking currencies from a comprehensive list, inputting formatted currency values, and displaying them according to currency-specific rules (like symbol position and decimal digits).

Features

This package includes the following widgets:

`CurrencyPicker`

A complete widget for the user to pick a currency and enter an amount in that currency. It features:

A dropdown menu to select from all supported currencies.
A text field for amount input.
Automatic formatting of the currency symbol and decimal places based on the selected currency.

`CurrencyTextField`

A text field for entering a value in a pre-defined currency. Its features include:

A fixed currency, set by a currencyCode.
Automatic formatting and decoration for the specified currency.
Input validation to ensure the correct number of decimal places.

`CurrencyTextView`

A read-only widget to display a formatted currency value.

Displays a non-editable amount.
Formats the value with the correct decimal places and currency symbol.
Ideal for showing final values or summaries.

`CurrencyCardReport`

A widget for displaying a list of currency values in a card format. This is useful for reports or summaries where multiple currency amounts need to be shown clearly.

Presents data in a structured and readable card layout.
Each item in the list can represent a different currency or aspect of a report.
Customizable to fit various reporting needs.

`CurrencyChooser`

A lightweight widget to select a currency without requiring an amount. Use it when you only need the user to pick a currency, with no amount input involved.

Dropdown to select from common or all supported currencies.
Toggle button (⭐ / 🌐) to switch between most-used and all currencies.
Displays the full localized name of the selected currency.
Exposes the selection via CurrencyController.currency and CurrencyController.currencyNotifier.

Widget	Properties
`CurrencyPicker`	`currencyController`: (required) Manages currency state.
`CurrencyTextField`	`currencyController`: (required) Manages currency state. `currencyCode`: (required) Code of the currency to use.
`CurrencyTextView`	`mount`: (required) Amount to display. `currencyCode`: (required) Code of the currency. `CurrencyControler` : (required)Manages currency state
`CurrencyCardReport`	`title`: (required) Title widget for the card. `icon`: (required) Icon widget for the card. `mount`: (required) Amount to display. `currencyCode`: (required) Code of the currency. `lang`: (required) Language for formatting. `style`: Text Style
`CurrencyChooser`	`currencyController`: (required) Manages currency state and exposes the selected currency via `controller.currency` and `controller.currencyNotifier`.

Note: All widgets also accept standard Flutter widget properties like key, padding, margin, etc.

Screenshots

Here are some visual examples of the widgets in action:

Example 1: All Widgets

All Widgets Example

Example 2: Currency Picker Favourites currencies

Currency Picker Favourites currencies

Example 3: Currency Picker all currencies

Currency Picker all currencies

Getting Started

To use this package, add currency_widget as a dependency in your pubspec.yaml file.

dependencies:
  currency_widget: ^latest_version # Replace with the latest version

Or run this command in your terminal:

flutter pub add currency_widget

Then, import the package in your Dart code:

import 'package:currency_widget/currency_widget.dart';

Usage

Here is a basic example of how to use the CurrencyPicker widget. You'll need to provide a CurrencyController to manage the state.

import 'package:flutter/material.dart';
import 'package:currency_widget/currency_widget.dart';

class MyCurrencyScreen extends StatefulWidget {
  const MyCurrencyScreen({super.key});

  @override
  State<MyCurrencyScreen> createState() => _MyCurrencyScreenState();
}

class _MyCurrencyScreenState extends State<MyCurrencyScreen> {
  final CurrencyController _controller = CurrencyController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Currency Widget Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            CurrencyPicker(currencyController: _controller),
            SizedBox(height: 20),
            // You can listen to changes in the controller
            ValueListenableBuilder<Currency>(
              valueListenable: _controller.currencyNotifier,
              builder: (_, currency, __) {
                return Text('Selected Currency: ${currency.code}');
              },
            ),
            SizedBox(
                width: 200,
                child:
                CurrencyCardReport( title: Text('Currency Report'), icon: Icon(Icons.currency_exchange),mount: 250.24, currencyCode: 'usd', lang: 'en',)
            ),
            SizedBox(height: 20),
            // CurrencyChooser: pick a currency without entering an amount
            CurrencyChooser(currencyController: _controller),
            ValueListenableBuilder<Currency?>(
              valueListenable: _controller.currencyNotifier,
              builder: (_, currency, __) {
                return Text('Selected: ${currency?.getDefaultView() ?? ''}');
              },
            ),
          ],
        ),
      ),
    );
  }
}

Additional Information

To report any issues or contribute to the package, please file an issue at the GitHub repository. We appreciate your feedback and contributions!

Help this project

If you find this package helpful and want to support its development, consider making a donation. Thank you for your support!

Currency Widget