Flutter国际银行账号输入插件iban_form_field的使用

Flutter国际银行账号输入插件iban_form_field的使用

它包含以下功能：

  • 自动检测并粘贴IBAN
  • 自动字段前进
  • 国家特定提示

使用方法

请参阅示例目录。

集成测试

对于您的集成测试，TextFormField有唯一的键：

  • ‘iban-form-field-country-code’
  • ‘iban-form-field-check-digits’
  • ‘iban-form-field-basic-bank-account-number’

功能和问题

请在问题跟踪器中提交功能请求和错误报告。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  // 此小部件是您的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter IBAN Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Example());
  }
}

final _formKey = GlobalKey<FormState>();

class Example extends StatefulWidget {
  [@override](/user/override)
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  Iban? _iban;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Form(
                key: _formKey,
                child: IbanFormField(
                  onSaved: (iban) => _iban = iban,
                  initialValue: Iban('NL'), // 初始国家代码为荷兰
                  autofocus: true,
                  validator: (iban) {
                    if (!iban!.isValid) {
                      return 'This IBAN is not valid'; // 如果IBAN无效，则返回错误信息
                    }
                    return null;
                  },
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  if (!_formKey.currentState!.validate()) {
                    return;
                  }

                  _formKey.currentState!.save();
                  showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        content: Text(_iban.toString()), // 显示保存的IBAN
                      );
                    },
                  );
                },
                child: Text('显示'), // 按钮文本
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter国际银行账号输入插件iban_form_field的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国际银行账号输入插件iban_form_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


iban_form_field 是一个用于Flutter的插件，专门用于输入国际银行账号（IBAN）。它提供了一个文本字段，允许用户输入IBAN，并且可以自动格式化、验证和提供有关IBAN的信息。

安装

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

dependencies:
  flutter:
    sdk: flutter
  iban_form_field: ^1.0.0  # 请使用最新版本

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

基本用法

下面是一个简单的示例，展示如何在Flutter应用中使用 iban_form_field：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('IBAN Form Field Example'),
        ),
        body: IBANFormFieldExample(),
      ),
    );
  }
}

class IBANFormFieldExample extends StatefulWidget {
  [@override](/user/override)
  _IBANFormFieldExampleState createState() => _IBANFormFieldExampleState();
}

class _IBANFormFieldExampleState extends State<IBANFormFieldExample> {
  final _formKey = GlobalKey<FormState>();
  String _iban = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          children: [
            IBANFormField(
              decoration: InputDecoration(
                labelText: 'IBAN',
                border: OutlineInputBorder(),
              ),
              onChanged: (value) {
                setState(() {
                  _iban = value;
                });
              },
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter an IBAN';
                }
                if (!IBAN.isValid(value)) {
                  return 'Please enter a valid IBAN';
                }
                return null;
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('IBAN is valid: $_iban')),
                  );
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部