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

发布于 1周前 作者 sinazl 来自 Flutter

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

text_mask 是一个用于在Flutter应用程序中对文本进行格式化的包。它可以帮助开发者轻松地为电话号码、日期、IP地址等类型的输入添加掩码，从而确保用户输入的数据符合预期的格式。

使用步骤

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 text_mask 作为依赖：

dependencies:
  text_mask: ^1.0.4

然后运行 flutter pub get 来安装这个包。

2. 导入包

在需要使用的Dart文件中导入 text_mask 包：

import 'package:text_mask/text_mask.dart';

使用方法

text_mask 主要通过 TextMask 类来实现文本的格式化。你可以使用 # 来表示你想要格式化的字符位置。例如，对于电话号码，可以使用如下掩码：'+90(###) ### ## ##'。

Const文本格式化示例

如果你只是想展示一段已经格式化好的文本，可以直接使用 TextMask 的 getMaskedText 方法。例如：

Text(
  'Phone: ${TextMask(pallet: '+90(###) ### ## ##').getMaskedText('5451312132')}',
),

这将输出带有格式的电话号码：Phone: +90(545) 131 21 32。

TextField格式化示例

对于用户输入的场景，可以通过 inputFormatters 参数给 TextField 添加格式化规则。以下是一些常见的用法例子：

TextField(
  keyboardType: TextInputType.phone,
  inputFormatters: [TextMask(pallet: '+90(###) ### ## ##')],
  decoration: const InputDecoration(
    label: Text('Phone'),
  ),
),

TextField(
  keyboardType: TextInputType.number,
  inputFormatters: [TextMask(pallet: '#### #### #### ####')],
  decoration: const InputDecoration(
    label: Text('Credit Card Number'),
  ),
),

TextField(
  keyboardType: TextInputType.datetime,
  inputFormatters: [TextMask(pallet: '##/##/####')],
  decoration: const InputDecoration(
    label: Text('Date'),
  ),
),

TextField(
  keyboardType: TextInputType.number,
  inputFormatters: [TextMask(pallet: '###.###.###.###')],
  decoration: const InputDecoration(
    label: Text('IP Address'),
  ),
),

TextField(
  keyboardType: TextInputType.number,
  inputFormatters: [TextMask(pallet: '# # # # # #')],
  decoration: const InputDecoration(
    label: Text('OTP'),
  ),
),

以上代码段展示了如何为不同的输入类型（如电话号码、信用卡号、日期、IP地址和一次性密码）设置相应的格式化规则。

完整示例代码

下面是一个完整的示例应用，它包含了上述所有功能，并且可以在实际项目中直接使用：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Mask',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Text Mask Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 36),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const SizedBox(height: 26),
            const Center(
              child: Text(
                'Mask TextField ',
                style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
            ),
            TextField(
              keyboardType: TextInputType.phone,
              inputFormatters: [TextMask(pallet: '+90(###) ### ## ##')],
              decoration: const InputDecoration(
                label: Text('Phone'),
              ),
            ),
            TextField(
              keyboardType: TextInputType.number,
              inputFormatters: [TextMask(pallet: '#### #### #### ####')],
              decoration: const InputDecoration(
                label: Text('Credit Card Number'),
              ),
            ),
            TextField(
              keyboardType: TextInputType.datetime,
              inputFormatters: [TextMask(pallet: '##/##/####')],
              decoration: const InputDecoration(
                label: Text('Date'),
              ),
            ),
            TextField(
              keyboardType: TextInputType.number,
              inputFormatters: [TextMask(pallet: '###.###.###.###')],
              decoration: const InputDecoration(
                label: Text('IP Address'),
              ),
            ),
            TextField(
              keyboardType: TextInputType.number,
              inputFormatters: [TextMask(pallet: '# # # # # #')],
              decoration: const InputDecoration(
                label: Text('OTP'),
              ),
            ),
            const SizedBox(height: 26),
            const Center(
              child: Text(
                'Mask Const Text',
                style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
            ),
            const SizedBox(height: 12),
            Text(
              'Phone: ${TextMask(pallet: '+90(###) ### ## ##').getMaskedText('5451312132')}',
            ),
            const SizedBox(height: 8),
            Text(
              'Credit Card Number: ${TextMask(pallet: '#### #### #### ####').getMaskedText('1234432134567654')}',
            ),
            const SizedBox(height: 8),
            Text(
              'Ip Address: ${TextMask(pallet: '###.###.###.###').getMaskedText('123443213456')}',
            ),
          ],
        ),
      ),
    );
  }
}

通过这段代码，你可以创建一个包含多种输入格式化示例的应用程序，并且能够直观地看到 text_mask 插件的效果。希望这些信息对你有所帮助！


更多关于Flutter文本格式化插件text_mask的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter文本格式化插件text_mask的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用text_mask插件进行文本格式化的代码案例。text_mask插件允许你根据预定义的格式来限制用户输入的内容，例如电话号码、信用卡号等。

1. 添加依赖

首先，你需要在你的pubspec.yaml文件中添加text_mask插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  text_mask: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

2. 使用TextMaskFormatter

接下来，你可以在你的Flutter项目中导入text_mask插件并使用TextMaskFormatter来格式化文本输入。以下是一个完整的示例，演示如何格式化电话号码输入：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Text Mask Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Mask Formatter Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextFieldWithMask(),
        ),
      ),
    );
  }
}

class TextFieldWithMask extends StatefulWidget {
  @override
  _TextFieldWithMaskState createState() => _TextFieldWithMaskState();
}

class _TextFieldWithMaskState extends State<TextFieldWithMask> {
  final TextEditingController _controller = TextEditingController();
  final MaskFormatter phoneFormatter = MaskFormatter(
    pattern: '(***) ***-****', // 电话格式示例
    filter: {
      '[0-9]': RegExp(r'[0-9]')
    }
  );

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      decoration: InputDecoration(
        labelText: 'Phone Number',
      ),
      inputFormatters: [
        FilteringTextInputFormatter.digitsOnly, // 只允许输入数字
        TextMaskFormatter(formatter: phoneFormatter), // 应用掩码格式化
      ],
      onChanged: (value) {
        // 在这里处理文本变化，如果需要的话
        // 注意：TextMaskFormatter会自动处理格式化，所以不需要手动处理
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

3. 解释

  • MaskFormatter: MaskFormatter用于定义输入文本的格式。在这个例子中，我们定义了一个电话号码格式(***) ***-****。
  • inputFormatters: inputFormatters是一个列表，用于定义应用于文本字段的格式化器。在这个例子中，我们使用了两个格式化器：
    • FilteringTextInputFormatter.digitsOnly：只允许输入数字。
    • TextMaskFormatter(formatter: phoneFormatter)：应用我们定义的电话格式掩码。

4. 运行应用

将上述代码粘贴到你的Flutter项目中，然后运行应用。你应该会看到一个文本字段，当你输入电话号码时，它会自动按照(***) ***-****的格式进行格式化。

这个示例展示了如何使用text_mask插件来格式化文本输入。你可以根据需要修改掩码格式和过滤器，以适应不同的输入需求。

回到顶部