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

Custom text input formatters that can be used with TextField and TextFormField widgets are available in this package.

Features

• Credit/Debit card number formatter
• Credit/Debit card expiration date formatter
• Decimal values formatter useful for currency values etc.

Installation

Add the quick_input_formatters package to your pubspec.yaml file:

dependencies:
  quick_input_formatters: ^0.0.4

After adding the dependency, run flutter pub get to install it.

Usage

To use the DecimalTextInputFormatter in a TextField or TextFormField to format a number input value with 2 decimal places, you should combine it with FilteringTextInputFormatter.digitsOnly.

Here is an example of how to implement this:

Example Code

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Currency field example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Currency field example'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                labelText: 'Enter amount',
                border: OutlineInputBorder(),
              ),
              inputFormatters: [
                // Use this input formatter to allow only digits
                FilteringTextInputFormatter.digitsOnly,

                // Use this input formatter to convert number inputs with decimal places
                // Here it is 2 decimal places because user inputs currency values
                DecimalTextInputFormatter(2)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Explanation

1. FilteringTextInputFormatter.digitsOnly: This ensures that only numeric characters are allowed.
2. DecimalTextInputFormatter(2): This formats the input to have up to 2 decimal places, which is particularly useful for currency inputs.

By combining these two formatters, you ensure that users can only enter valid currency amounts with up to two decimal places.

This setup provides a robust way to handle numeric input formatting in Flutter applications, ensuring that user inputs meet specific criteria and reducing potential errors in data entry.

This Markdown content provides a comprehensive guide on how to use the `quick_input_formatters` plugin for formatting text inputs in Flutter, including a full example demonstrating its usage.