Flutter金额输入格式化插件 money_input_formatter 的使用

money_input_formatter 是一个用于在 Flutter 应用中格式化货币输入的插件。它支持多种货币格式，如法语中的“1 333,34”和英语中的“1,333.34”，并且能够自动删除不必要的“.00”以提高可读性。

特性

• 支持配置小数点和千位分隔符。
• 自动删除 .00 以使数字更易读。
• 处理空格的删除和光标位置。
• 在生产环境中经过充分测试，并且包含广泛的单元测试。

使用方法

只需将 MoneyInputFormatter 作为 inputFormatters 参数传递给任何输入框即可。

基本示例

TextFormField(
  inputFormatters: [MoneyInputFormatter()],
  keyboardType: TextInputType.number,
)

使用控制器获取数值

该插件还提供了一个控制器来获取输入值作为数字：

import 'package:flutter/material.dart';
import 'package:money_input_formatter/money_input_controller.dart';
import 'package:money_input_formatter/money_input_formatter.dart';

class MoneyInputWidget extends StatefulWidget {
  [@override](/user/override)
  State<MoneyInputWidget> createState() => _MoneyInputWidgetState();
}

class _MoneyInputWidgetState extends State<MoneyInputWidget> {
  final controller = MoneyInputController();
  double value = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return TextFormField(
      textAlign: TextAlign.end,
      keyboardType: TextInputType.number,
      controller: controller,
      onChanged: (_) => setState(() => value = controller.numberValue),
      inputFormatters: [MoneyInputFormatter()],
    );
  }
}

完整示例 Demo

以下是一个完整的示例，展示了如何使用 money_input_formatter 插件来格式化输入框中的货币值。

import 'package:flutter/material.dart';
import 'package:money_input_formatter/money_input_controller.dart';
import 'package:money_input_formatter/money_input_formatter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'MoneyInputFormatter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = MoneyInputController();
  double value = 0;

  [@override](/user/override)
  void initState() {
    controller.numberValue = 0;
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              textAlign: TextAlign.end,
              keyboardType: TextInputType.number,
              controller: controller,
              onChanged: (_) => setState(() => value = controller.numberValue),
              inputFormatters: [MoneyInputFormatter()],
            ),
            Container(
              margin: const EdgeInsets.only(top: 30),
              child: Text('Value entered: $value', style: const TextStyle(fontSize: 15)),
            ),
          ],
        ),
      ),
    );
  }
}