Flutter巴西字段输入插件brasil_fields的使用

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

Flutter巴西字段输入插件brasil_fields的使用

插件简介

brasil_fields 是一个用于在Flutter项目中应用巴西格式和标准的最简单方式。通过此插件,可以轻松地将各种巴西特定的数据格式(如电话号码、邮政编码、日期等)应用于文本输入框中。

Brasil Fields

测试现在 | codecov

如何使用

添加依赖

首先,在pubspec.yaml文件中添加brasil_fields作为依赖:

dependencies:
  brasil_fields: ^最新版本号

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

使用Formatter

要使用格式化器,请将其包含在inputFormatters参数中。对于大多数情况,你需要先添加FilteringTextInputFormatter.digitsOnly以确保只接受数字输入,除非特别说明不需要这样做(例如车牌号格式化器)。

示例代码如下:

TextFormField(
  inputFormatters: [
    // 必须先过滤非数字字符
    FilteringTextInputFormatter.digitsOnly,
    CepInputFormatter(), // 示例:邮政编码格式化器
  ],
);

提供的Formatter列表

下表列出了brasil_fields提供的主要格式化器及其对应的格式:

格式 Formatter 示例格式
邮政编码 CepInputFormatter() 99.999-999
CPF CpfInputFormatter() 999.999.999-99
CNPJ CnpjInputFormatter() 99.999.999/9999-99
电话 TelefoneInputFormatter() (99) 99999-9999
更多见官方文档

注意:某些特殊格式如车牌号(PlacaVeiculoInputFormatter)不需要使用FilteringTextInputFormatter.digitsOnly,因为它支持字母和数字混合输入。

实例演示

以下是一个完整的Dart代码示例,展示了如何创建一个带有多个格式化输入框的应用程序:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Brasil Fields',
      theme: ThemeData(primarySwatch: Colors.green),
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(
                  icon: Icon(Icons.keyboard),
                  child: Text('格式化器'),
                ),
                Tab(
                  icon: Icon(Icons.calendar_today),
                  child: Text('日期'),
                ),
                Tab(
                  icon: Icon(Icons.smart_display),
                  child: Text('其他'),
                ),
              ],
            ),
            title: const Text('Brasil Fields'),
          ),
          body: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: TabBarView(
              children: [
                ListView(
                  children: [
                    RowFormatters(
                      label: '邮政编码',
                      formatter: CepInputFormatter(),
                    ),
                    RowFormatters(
                      label: 'CPF',
                      formatter: CpfInputFormatter(),
                    ),
                    RowFormatters(
                      label: 'CNPJ',
                      formatter: CnpjInputFormatter(),
                    ),
                    RowFormatters(
                      label: '电话',
                      formatter: TelefoneInputFormatter(),
                    ),
                    RowFormatters(
                      label: '日期',
                      formatter: DataInputFormatter(),
                    ),
                    RowFormatters(
                      label: '时间',
                      formatter: HoraInputFormatter(),
                    ),
                    // 其他格式化器...
                  ],
                ),
                const Text('即将推出'),
                const Text('即将推出'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class RowFormatters extends StatelessWidget {
  final String label;
  final TextInputFormatter formatter;

  const RowFormatters(
      {super.key, required this.label, required this.formatter});

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(label: Text(label)),
      inputFormatters: [
        FilteringTextInputFormatter.digitsOnly,
        formatter,
      ],
    );
  }
}

该应用程序创建了一个简单的界面,其中包含多个文本输入框,每个输入框都应用了不同的巴西格式化器。用户可以根据需要选择并测试不同类型的输入格式。

以上就是关于brasil_fields插件的基本介绍及使用方法。希望这些信息能够帮助你在Flutter项目中更好地处理巴西本地化的数据输入问题。如果有任何疑问或需要进一步的帮助,请参考官方GitHub仓库获取更多信息。


更多关于Flutter巴西字段输入插件brasil_fields的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter巴西字段输入插件brasil_fields的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用brasil_fields插件的一个示例。这个插件主要用于简化巴西特有的字段输入,比如CPF(Cadastro de Pessoas Físicas)、CNPJ(Cadastro Nacional da Pessoa Jurídica)、CEP(Código de Endereçamento Postal)、电话号码和日期等。

首先,确保你已经在pubspec.yaml文件中添加了brasil_fields依赖:

dependencies:
  flutter:
    sdk: flutter
  brasil_fields: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来,下面是一个完整的Flutter应用示例,展示了如何使用brasil_fields插件中的几个字段:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Brasil Fields Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BrasilFieldsExample(),
    );
  }
}

class BrasilFieldsExample extends StatefulWidget {
  @override
  _BrasilFieldsExampleState createState() => _BrasilFieldsExampleState();
}

class _BrasilFieldsExampleState extends State<BrasilFieldsExample> {
  final _formKey = GlobalKey<FormState>();
  String? _cpf, _cnpj, _cep, _phone, _date;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Brasil Fields Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'CPF'),
                validator: (value) {
                  if (value == null || value.isEmpty || !CpfValidator().isValid(value)) {
                    return 'Invalid CPF';
                  }
                  return null;
                },
                inputFormatters: [CpfTextFormatter()],
                onSaved: (value) => _cpf = value,
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(labelText: 'CNPJ'),
                validator: (value) {
                  if (value == null || value.isEmpty || !CnpjValidator().isValid(value)) {
                    return 'Invalid CNPJ';
                  }
                  return null;
                },
                inputFormatters: [CnpjTextFormatter()],
                onSaved: (value) => _cnpj = value,
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(labelText: 'CEP'),
                validator: (value) {
                  if (value == null || value.isEmpty || !CepValidator().isValid(value)) {
                    return 'Invalid CEP';
                  }
                  return null;
                },
                inputFormatters: [CepTextFormatter()],
                onSaved: (value) => _cep = value,
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(labelText: 'Phone'),
                validator: (value) {
                  if (value == null || value.isEmpty || !PhoneValidator().isValid(value)) {
                    return 'Invalid Phone';
                  }
                  return null;
                },
                inputFormatters: [PhoneTextFormatter()],
                onSaved: (value) => _phone = value,
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(labelText: 'Date'),
                validator: (value) {
                  if (value == null || value.isEmpty || !DateTime.tryParse(value!)!.isBefore(DateTime.now())) {
                    return 'Invalid Date';
                  }
                  return null;
                },
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                keyboardType: TextInputType.datetime,
                onSaved: (value) => _date = value,
                // Note: For a better date picker experience, consider using `showDatePicker`
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                    // Here you can handle the saved data, e.g., print it to the console
                    print('CPF: $_cpf');
                    print('CNPJ: $_cnpj');
                    print('CEP: $_cep');
                    print('Phone: $_phone');
                    print('Date: $_date');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的表单,包含CPF、CNPJ、CEP、电话号码和日期字段。每个字段都使用了brasil_fields提供的验证器和格式化器。当用户提交表单时,会验证输入的数据,如果数据有效,则会保存到相应的变量中。

注意,日期字段在这个示例中只是简单地使用了数字格式化器,你可能想使用showDatePicker来提供一个更好的用户体验。

这个示例展示了如何使用brasil_fields插件来简化和验证巴西特有的字段输入。希望这对你有所帮助!

回到顶部