Flutter表单输入插件form_input的使用

Flutter表单输入插件form_input的使用

简介

form_input 是一个简单的表单输入表示辅助类，其灵感来源于 formz 包。它可以帮助开发者更方便地处理表单输入的校验和清理逻辑。

示例

以下是一个简单的示例，展示了如何使用 form_input 来创建一个电子邮件输入字段。

示例代码

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

// 定义一个 EmailInput 类，继承自 FormInput<String, Exception>
class EmailInput extends FormInput<String, Exception> {
  // 构造函数，用于创建纯输入状态（未编辑状态）
  const EmailInput.pure([String value = '']) : super.pure(value);

  // 构造函数，用于创建脏输入状态（已编辑状态）
  const EmailInput.dirty(String value) : super.dirty(value);

  // 构造函数，用于创建无效状态
  const EmailInput.invalid(String value, Exception e) : super.invalid(value, e);

  // 清理函数，用于清理输入值
  [@override](/user/override)
  String sanitize(String value) {
    // 返回去除首尾空格后的值
    return value.trim();
  }

  // 验证函数，用于验证输入值是否有效
  [@override](/user/override)
  Exception? validate(String value) {
    if (value.isEmpty) {
      // 如果值为空，返回格式化异常
      return FormatException('The email is empty.', value);
    }
    // 如果值有效，返回 null
    return null;
  }
}

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

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

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

class _FormInputExampleState extends State<FormInputExample> {
  final EmailInput _emailInput = EmailInput.pure();

  void _onEmailChanged(String value) {
    setState(() {
      if (_emailInput.status.isPure) {
        _emailInput = EmailInput.dirty(value);
      } else {
        _emailInput = _emailInput.copyWith(value: value);
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 显示当前输入值
        Text('Current Value: ${_emailInput.value}'),

        // 显示当前输入状态
        Text('Status: ${_emailInput.status}'),

        // 显示验证错误信息
        if (_emailInput.error != null)
          Text('Error: ${_emailInput.error}', style: TextStyle(color: Colors.red)),

        // 输入框
        TextField(
          onChanged: _onEmailChanged,
          decoration: InputDecoration(
            labelText: 'Enter your email',
          ),
        ),
      ],
    );
  }
}

更多关于Flutter表单输入插件form_input的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


form_input 是一个 Flutter 插件，用于简化表单输入的处理。它提供了一种更简洁的方式来管理表单字段、验证和提交。以下是如何使用 form_input 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 form_input 插件的依赖：

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

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

2. 导入包

在你的 Dart 文件中导入 form_input 包：

import 'package:form_input/form_input.dart';

3. 创建表单

使用 FormInput 来创建表单字段。FormInput 提供了多种输入类型，如 TextInput、EmailInput、PasswordInput 等。

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  TextInput _username = TextInput();
  EmailInput _email = EmailInput();
  PasswordInput _password = PasswordInput();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Username'),
            onChanged: _username.setValue,
            validator: _username.validator,
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Email'),
            onChanged: _email.setValue,
            validator: _email.validator,
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            onChanged: _password.setValue,
            validator: _password.validator,
          ),
          ElevatedButton(
            onPressed: _submitForm,
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // 表单验证通过，处理提交逻辑
      print('Username: ${_username.value}');
      print('Email: ${_email.value}');
      print('Password: ${_password.value}');
    }
  }
}

4. 使用表单

在你的应用中使用这个表单：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Input Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

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

5. 运行应用

运行你的 Flutter 应用，你将看到一个包含用户名、邮箱和密码输入的表单。当用户输入信息并点击提交按钮时，表单将进行验证，并在验证通过后输出输入的值。

6. 自定义验证

form_input 插件允许你自定义验证规则。例如，你可以为 TextInput 添加自定义验证规则：

TextInput _username = TextInput(
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter a username';
    }
    if (value.length < 3) {
      return 'Username must be at least 3 characters long';
    }
    return null;
  },
);

7. 其他输入类型

form_input 还提供了其他输入类型，如 NumberInput、PhoneInput 等，可以根据需要进行使用。

NumberInput _age = NumberInput();
PhoneInput _phone = PhoneInput();

8. 处理表单提交

在 _submitForm 方法中，你可以处理表单提交的逻辑。例如，将数据发送到服务器或保存到本地数据库。

void _submitForm() {
  if (_formKey.currentState!.validate()) {
    // 处理提交逻辑
    print('Username: ${_username.value}');
    print('Email: ${_email.value}');
    print('Password: ${_password.value}');
  }
}
回到顶部