Flutter货币面额管理插件denomination的使用

Denomination Widget

Denomination 是一个用于格式化和显示货币面额的 Flutter 小部件。它提供了一种方便的方式来以适当的货币符号和格式规则显示金额。

特性

• 支持多种硬币和纸币面额。
• 可自定义的金额显示格式规则。

开始使用

要使用此插件，只需在 pubspec.yaml 文件中添加 denomination 作为依赖项。

dependencies:
  denomination: ^版本号

然后运行 flutter pub get 来获取依赖。

示例用法

以下是一个完整的示例代码，展示如何使用 Denomination 插件来处理货币面额的输入和提交。

import 'package:flutter/material.dart';
import 'package:denomination/denomination.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Denomination Example')),
        body: DenominationExample(),
      ),
    );
  }
}

class DenominationExample extends StatefulWidget {
  [@override](/user/override)
  _DenominationExampleState createState() => _DenominationExampleState();
}

class _DenominationExampleState extends State<DenominationExample> {
  bool denominationFocus = false;
  Map<String, dynamic> denominations = {};
  final amountController = TextEditingController();
  final amountFocusNode = FocusNode();
  final remarksfocusNode = FocusNode();

  void handleOnTransferFunds() {
    print('Transferring funds...');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Denomination(
        autoFocus: denominationFocus,
        primaryButtonLabel: 'Proceed',
        title: Text(
          'Transfer funds to cashier',
          style: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        onSubmit: (Denominations values) {
          setState(() {
            denominations = values.toJson();
          });
          handleOnTransferFunds();
        },
        amount: double.tryParse(amountController.text.replaceAll(',', '')) ?? 0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 20),
            Text(
              'Get notified of activity',
              style: TextStyle(fontSize: 14, color: Color(0xFF6B7280)),
            ),
            const SizedBox(height: 10),
            const SizedBox(height: 10),
            Text(
              'Amount',
              style: TextStyle(fontSize: 14, color: Colors.black),
            ),
            const SizedBox(height: 10),
            SizedBox(
              width: 580,
              height: 59,
              child: TextFormField(
                focusNode: amountFocusNode,
                onFieldSubmitted: (value) {
                  remarksfocusNode.requestFocus();
                },
                onChanged: (value) {
                  setState(() {});
                },
                inputFormatters: [
                  CurrencyInputFormatter(
                    mantissaLength: 2,
                    useSymbolPadding: true,
                  ),
                ],
                controller: amountController,
                style: TextStyle(fontSize: 14, color: Colors.black),
                decoration: InputDecoration(
                  labelText: 'Enter Amount',
                  border: OutlineInputBorder(),
                ),
              ),
            ),
            const SizedBox(height: 10),
            Text(
              'Remarks',
              style: TextStyle(fontSize: 14, color: Colors.black),
            ),
            const SizedBox(height: 10),
            SizedBox(
              width: 580,
              height: 50,
              child: TextFormField(
                onFieldSubmitted: (value) {
                  setState(() {
                    denominationFocus = true;
                  });
                },
                focusNode: remarksfocusNode,
                style: TextStyle(fontSize: 14, color: Colors.black),
                decoration: InputDecoration(
                  labelText: 'Enter Remarks',
                  border: OutlineInputBorder(),
                ),
              ),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}