Flutter表单验证插件validation_form的使用

简化Flutter项目中的表单管理，可以使用Cubit架构。以下是使用validation_form插件的详细指南。

安装

要将此库添加到你的Flutter项目中，在pubspec.yaml文件中添加以下依赖项：

dependencies:
  validation_form: "^0.0.6"

然后运行flutter pub get以获取该库。

如何使用

首先在Dart代码中导入库：

import 'package:validation_form/validation_form.dart';

接下来是一个完整的示例，展示了如何使用validation_form插件来创建一个登录表单。

示例代码

import 'package:example/login.dart';
import 'package:example/profile.dart';
import 'package:flutter/material.dart';
import 'package:validation_form/validation_form.dart';

void main() => runApp(MaterialApp(title: 'Flutter Demo', home: const Home()));

class Home extends StatefulWidget {
  const Home({super.key});

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  [@override](/user/override)
  void initState() {
    // 自定义验证消息
    ValidationMessages.messages = {
      ValidationNames.required: (attribute, [_ = const []]) {
        return '字段 $attribute 是必填项';
      }
    };

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
              child: const Text('登录'),
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const Login()),
                );
              },
            ),
            ElevatedButton(
              child: const Text('个人资料'),
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const Profile()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

登录页面示例代码

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

class Login extends StatefulWidget {
  const Login({super.key});

  [@override](/user/override)
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: '用户名'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入用户名';
                  }
                  return null;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: '密码'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入密码';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 表单验证通过，可以提交表单
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('登录成功')),
                    );
                  }
                },
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

个人资料页面示例代码

import 'package:flutter/material.dart';

class Profile extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('个人资料'),
      ),
      body: Center(
        child: Text('个人资料页面'),
      ),
    );
  }
}