Flutter 表单管理插件 flutter_formik 的使用

Flutter Formik 是一个受 React Formik 启发的 Flutter 表单管理库。它提供了一种简单直观的方式来处理表单状态、验证和提交操作。Flutter Formik 设计简单、灵活且可扩展，允许你在 Flutter 应用程序中构建复杂的表单而无需编写大量样板代码。它基于 form_validator 包来提供可自定义的验证规则和错误消息。

特性

• 简单声明式的 API 来管理表单状态
• 使用 form_validator 包支持内置验证功能，并可自定义验证规则
• 支持表单提交，可选异步操作
• 与 Flutter 的小部件树无缝集成
• 促进关注点分离和可重用性

安装

要在你的 Flutter 项目中使用 Flutter Formik，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_formik: ^1.0.0

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

使用

以下是一个基本的使用示例：

import 'package:flutter/material.dart';
import 'package:flutter_formik/flutter_formik.dart';
import 'package:form_validator/form_validator.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Formik Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Flutter Formik Demo'),
        ),
        body: Formik(
          initialValues: {
            'email': '',
            'password': '',
          },
          validationSchema: {
            'email': ValidationBuilder()
                .required('Email is required')
                .email('Email is not valid'),
            'password': ValidationBuilder()
                .required('Password is required')
                .minLength(6, 'Password must be at least 6 characters'),
          },
          onSubmit: (payload, errors) {
            if (errors.isNotEmpty) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(errors.values.first),
                ),
              );
              return;
            }
            UserModel user = UserModel.fromJson(payload);
            // 发送用户对象到业务逻辑
            // ...
          },
          child: (values, isValid, handleSubmit, handleReset, handleChange, errors) {
            return Column(
              children: [
                TextField(
                  decoration: InputDecoration(
                    labelText: 'Email',
                    errorText: errors['email'],
                  ),
                  onChanged: (value) {
                    handleChange('email', value);
                  },
                ),
                TextField(
                  decoration: InputDecoration(
                    labelText: 'Password',
                    errorText: errors['password'],
                  ),
                  onChanged: (value) {
                    handleChange('password', value);
                  },
                ),
                ElevatedButton(
                  onPressed: () {
                    handleSubmit();
                  },
                  child: const Text('Submit'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'package:flutter_formik/flutter_formik.dart';
   import 'package:form_validator/form_validator.dart';
   

2. 初始化应用：

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

3. 创建应用主界面：

   class Demo extends StatelessWidget {
     const Demo({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Formik Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: Scaffold(
           appBar: AppBar(
             backgroundColor: Theme.of(context).colorScheme.inversePrimary,
             title: const Text('Flutter Formik Demo'),
           ),
           body: Formik(
             // 初始化表单字段值
             initialValues: {
               'email': '',
               'password': '',
             },
             // 设置验证规则
             validationSchema: {
               'email': ValidationBuilder()
                   .required('Email is required')
                   .email('Email is not valid'),
               'password': ValidationBuilder()
                   .required('Password is required')
                   .minLength(6, 'Password must be at least 6 characters'),
             },
             // 处理表单提交
             onSubmit: (payload, errors) {
               if (errors.isNotEmpty) {
                 ScaffoldMessenger.of(context).showSnackBar(
                   SnackBar(
                     content: Text(errors.values.first),
                   ),
                 );
                 return;
               }
               UserModel user = UserModel.fromJson(payload);
               // 发送用户对象到业务逻辑
               // ...
             },
             // 构建表单组件
             child: (values, isValid, handleSubmit, handleReset, handleChange, errors) {
               return Column(
                 children: [
                   TextField(
                     decoration: InputDecoration(
                       labelText: 'Email',
                       errorText: errors['email'],
                     ),
                     onChanged: (value) {
                       handleChange('email', value);
                     },
                   ),
                   TextField(
                     decoration: InputDecoration(
                       labelText: 'Password',
                       errorText: errors['password'],
                     ),
                     onChanged: (value) {
                       handleChange('password', value);
                     },
                   ),
                   ElevatedButton(
                     onPressed: () {
                       handleSubmit();
                     },
                     child: const Text('Submit'),
                   ),
                 ],
               );
             },
           ),
         ),
       );
     }
   }