Flutter货币文本输入格式化插件currency_text_input_formatter的使用

Currency Text Input Formatter

currency_text_input_formatter是Flutter的一个库，用于在文本输入时自动格式化货币值。以下是它的安装和使用方法。

安装

添加到pubspec.yaml

dependencies:
  currency_text_input_formatter: ^2.2.6

解决Intl包冲突

如果你遇到了intl包版本冲突的问题，可以在pubspec.yaml中添加以下内容：

dependency_overrides:
  intl: your intl package version

使用方法

基本用法

下面是一个简单的例子，展示了如何使用CurrencyTextInputFormatter来格式化用户输入的货币值：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: TextField(
            inputFormatters: [CurrencyTextInputFormatter.currency()],
            keyboardType: TextInputType.number,
          ),
        ),
      ),
    );
  }
}

带初始值

你可以为TextFormField设置一个初始值，并使用CurrencyTextInputFormatter进行格式化：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Center(
          child: MyFormField(),
        ),
      ),
    );
  }
}

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

  @override
  State<MyFormField> createState() => _MyFormFieldState();
}

class _MyFormFieldState extends State<MyFormField> {
  final CurrencyTextInputFormatter _formatter = CurrencyTextInputFormatter.currency();

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      initialValue: _formatter.format('2000'),
      inputFormatters: <TextInputFormatter>[_formatter],
      keyboardType: TextInputType.number,
    );
  }
}

自定义选项

你可以通过传递参数来自定义格式化器的行为，例如指定货币符号、小数位数和语言环境：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Center(
          child: TextField(
            inputFormatters: <TextInputFormatter>[
              CurrencyTextInputFormatter.currency(
                locale: 'ko',
                decimalDigits: 0,
                symbol: 'KRW(원) ',
              ),
            ],
            keyboardType: TextInputType.number,
          ),
        ),
      ),
    );
  }
}

使用内置方法

CurrencyTextInputFormatter还提供了一些内置的方法，方便你获取格式化或未格式化的值：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Center(
          child: MyFormField(),
        ),
      ),
    );
  }
}

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

  @override
  State<MyFormField> createState() => _MyFormFieldState();
}

class _MyFormFieldState extends State<MyFormField> {
  final CurrencyTextInputFormatter _formatter = CurrencyTextInputFormatter.currency();

  @override
  Widget build(BuildContext context) {
    // Built-in Methods
    print(_formatter.getFormattedValue()); // $ 2,000
    print(_formatter.getUnformattedValue()); // 2000.00
    print(_formatter.format('2000')); // $ 2,000
    print(_formatter.formatDouble('20.00')); // $ 20

    return TextFormField(
      inputFormatters: <TextInputFormatter>[_formatter],
      keyboardType: TextInputType.number,
    );
  }
}

推荐库

• Confirm Dialog - Confirm Dialog Widget for Flutter(JS-LIKE).
• Prompt Dialog - Prompt Dialog Widget for Flutter(JS-LIKE).
• Alert Dialog - Alert Dialog Widget for Flutter(JS-LIKE).

维护者

• Jehun Seem

许可证

MIT