Flutter文本格式化插件extended_masked_text_fixed的使用
Flutter文本格式化插件extended_masked_text_fixed的使用
Extended Masked Text
此包基于flutter_masked_text的源代码，并尝试修复一些错误并继续开发原始项目。
使用
导入库：
```dart import 'package:extended_masked_text_fixed/extended_masked_text.dart'; ```MaskedTextController
创建你的掩码控制器：
```dart final controller = MaskedTextController(mask: '000.000.000-00'); ```将控制器设置到文本字段中：
```dart return MaterialApp( title: 'Masked Text Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: SafeArea( child: Scaffold( body: Column( children: [ TextField( // 添加控制器到TextField controller: controller, ), ], ), ), ), ); ```MoneyMaskedTextController
创建你的货币掩码控制器：
```dart final controller = MoneyMaskedTextController(leftSymbol: 'R\$ '); ```将控制器设置到文本字段中：
```dart return MaterialApp( title: 'Money Masked Text Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: SafeArea( child: Scaffold( body: Column( children: [ TextField( // 添加控制器到TextField controller: controller, ), ], ), ), ), ); ```完整示例Demo
以下是一个完整的示例，展示了如何使用MaskedTextController和MoneyMaskedTextController。
import 'package:example/pages/masked_text_sample.dart';
import 'package:example/pages/money_masked_text_sample.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) => MaterialApp(
title: 'Masked Text Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: const MyHomePage(title: 'Extended Masked Text Demo'),
);
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key key, this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => MaskedTextSample(),
),
),
child: const Text('Masked Controller'),
),
ElevatedButton(
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => MoneyMaskedTextSample(),
),
),
child: const Text('Money Masked Controller'),
)
],
),
),
);
}
更多关于Flutter文本格式化插件extended_masked_text_fixed的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter文本格式化插件extended_masked_text_fixed的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
extended_masked_text_fixed 是一个 Flutter 插件，用于在文本输入时应用格式掩码。它可以帮助你在用户输入时自动格式化文本，比如电话号码、日期、货币等。这个插件是 extended_masked_text 的一个修复版本，解决了一些已知的问题。
安装
首先，你需要在 pubspec.yaml 文件中添加依赖：
dependencies:
extended_masked_text_fixed: ^1.0.0
然后运行 flutter pub get 来安装依赖。
基本用法
以下是使用 extended_masked_text_fixed 的基本示例：
import 'package:flutter/material.dart';
import 'package:extended_masked_text_fixed/extended_masked_text_fixed.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ExtendedMaskedText Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: MaskedTextFieldExample(),
),
),
);
}
}
class MaskedTextFieldExample extends StatefulWidget {
[@override](/user/override)
_MaskedTextFieldExampleState createState() => _MaskedTextFieldExampleState();
}
class _MaskedTextFieldExampleState extends State<MaskedTextFieldExample> {
final _controller = MaskedTextController(mask: '(000) 000-0000');
[@override](/user/override)
Widget build(BuildContext context) {
return TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Phone Number',
hintText: '(123) 456-7890',
),
keyboardType: TextInputType.phone,
);
}
}