Flutter文本格式化插件text_input_formatter的使用

Flutter文本格式化插件text_input_formatter的使用

插件简介

text_input_formatter 是一个Flutter插件，提供了可定制的文本格式化功能，适用于文本字段。通过该插件，您可以轻松地强制执行特定的模式和分隔符，确保一致且用户友好的文本输入体验。它非常适合用于格式化日期、数字或其他结构化的输入，增强了应用程序的数据输入界面。

该插件扩展了 pattern_formatter，增加了对精确和灵活的数值输入处理的功能。主要特性包括：

• 扩展的小数精度：支持多达18位小数，确保金融或科学应用中的高精度。
• 小数精度保持：使用 Decimal 库防止双精度值的意外舍入。
• 输入长度控制：限制最大输入字符数，确保一致性并避免溢出。
• 原始值提取：提供方法将格式化后的值转换回原始的数值输入。
• 基于区域的自定义格式：允许根据区域设置自定义格式规则，使插件在不同地区格式下都能灵活使用。

开始使用

1. 添加依赖

在 pubspec.yaml 文件中添加 text_input_formatter 依赖：

dependencies:
  text_input_formatter: ^1.0.2

2. 导入包

在 Dart 文件中导入 text_input_formatter 包：

import 'package:text_input_formatter/text_input_formatter.dart';

使用示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 text_input_formatter 进行数值、日期和信用卡格式化。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Input Formatter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Input Formatter Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义可复用的数值格式化器
    final formatter = NumericFormatter(
      allowFraction: true,  // 允许小数
      fractionDigits: 5,    // 小数点后最多5位
      thousandSeparator: ' ',  // 千位分隔符为空格
    );

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 数值输入框
              TextField(
                decoration: InputDecoration(
                  label: Text('Numeric'),  // 标签
                  border: OutlineInputBorder(),  // 边框样式
                ),
                inputFormatters: [formatter],  // 应用数值格式化器
                onChanged: (value) {
                  // 打印原始值
                  print(formatter.original(value));
                },
              ),
              const SizedBox(height: 20),  // 间距

              // 日期输入框
              TextField(
                decoration: InputDecoration(
                  label: Text(DatePattern.dd_MM_yyyy.value),  // 标签，显示日期格式
                  border: OutlineInputBorder(),  // 边框样式
                ),
                inputFormatters: [
                  DateFormatter(
                    separator: DateSeparator.slash,  // 日期分隔符为斜杠
                    pattern: DatePattern.dd_MM_yyyy,  // 日期格式为 dd/MM/yyyy
                  ),
                ],
              ),
              const SizedBox(height: 20),  // 间距

              // 信用卡输入框
              TextField(
                decoration: InputDecoration(
                  label: Text('Credit Card'),  // 标签
                  border: OutlineInputBorder(),  // 边框样式
                ),
                inputFormatters: [
                  CreditCardFormatter(),  // 应用信用卡格式化器
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}