Flutter数据验证插件riverpod_validator的使用

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

Flutter数据验证插件riverpod_validator的使用

Package Thumbnail

重要提示

该插件处于早期API设计阶段。

开发支持

要支持该插件的发展，您可以前往 GitHub 给它点赞并添加星标。

贡献者 ✨

Alt

欢迎任何形式的贡献！

活动

Alt

使用示例

以下是使用 riverpod_validator 插件的完整示例。本示例将展示如何在 Flutter 应用程序中实现基本的数据验证。

import 'package:flutter/material.dart';
import 'package:riverpod_validator/riverpod_validator.dart'; // 导入riverpod_validator库

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('WIP - App Update Checker Expample'),
        ),
      ),
    );
  }
}

在这个简单的示例中，我们仅展示了如何创建一个基础的 Flutter 应用程序。接下来，我们将进一步展示如何使用 riverpod_validator 进行数据验证。

首先，我们需要定义一些验证规则：

final nameValidator = Validator(
  (value) => value?.trim().isNotEmpty ?? false,
  errorMessage: 'Name cannot be empty',
);

final emailValidator = Validator(
  (value) => RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value ?? ''),
  errorMessage: 'Invalid email address',
);

上述代码定义了两个验证器，分别用于验证名称和电子邮件地址。接下来，我们将这些验证器应用于表单字段。

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

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final nameController = TextEditingController();
    final emailController = TextEditingController();

    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: nameController,
            decoration: InputDecoration(labelText: 'Name'),
            validator: (value) => ref.watch(nameValidator).validate(value),
          ),
          TextFormField(
            controller: emailController,
            decoration: InputDecoration(labelText: 'Email'),
            validator: (value) => ref.watch(emailValidator).validate(value),
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // 表单验证成功
                print('Form is valid');
              } else {
                // 表单验证失败
                print('Form is invalid');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个包含两个表单字段（名称和电子邮件）的表单。每个表单字段都有一个验证器，当用户尝试提交表单时，会触发验证逻辑。

最后，我们在主应用中使用 MyForm 小部件：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyForm(),
        ),
      ),
    );
  }
}

更多关于Flutter数据验证插件riverpod_validator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter数据验证插件riverpod_validator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用Flutter数据验证插件riverpod_validator的示例代码。riverpod_validator是一个结合Riverpod状态管理和表单验证的插件，使得在Flutter中进行表单验证更加简便。

首先，确保在你的pubspec.yaml文件中添加riverpod和riverpod_validator依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0  # 请根据最新版本进行调整
  riverpod_validator: ^0.0.1  # 请根据最新版本进行调整

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

接下来是一个完整的示例，展示了如何使用riverpod_validator进行简单的表单验证：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_validator/riverpod_validator.dart';

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        home: MyFormScreen(),
      ),
    ),
  );
}

final formProvider = StateNotifierProvider<FormNotifier>((ref) => FormNotifier());

class FormNotifier extends StateNotifier<FormState> {
  FormNotifier() : super(FormState.initial());

  void setName(String value) {
    state = state.copyWith(
      name: ValueWithValidation.validate(value, validators: [Validators.required]),
    );
  }

  void setEmail(String value) {
    state = state.copyWith(
      email: ValueWithValidation.validate(value, validators: [
        Validators.required,
        Validators.email,
      ]),
    );
  }

  void submitForm() {
    state = state.copyWith(isSubmitting: true);
    if (state.isValid) {
      // 处理提交逻辑
      print('Form submitted successfully!');
      state = state.copyWith(isSubmitting: false, isSubmitted: true);
    } else {
      state = state.copyWith(isSubmitting: false);
    }
  }
}

@freezed
class FormState with _$FormState {
  const factory FormState({
    required String name,
    required String email,
    required ValueWithValidation<String> validatedName,
    required ValueWithValidation<String> validatedEmail,
    bool isSubmitting = false,
    bool isSubmitted = false,
  }) = _FormState;

  factory FormState.initial() => FormState(
    name: '',
    email: '',
    validatedName: ValueWithValidation.empty(),
    validatedEmail: ValueWithValidation.empty(),
  );
}

class MyFormScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final formState = ref.watch(formProvider.state);
    final formNotifier = ref.read(formProvider.notifier);

    return Scaffold(
      appBar: AppBar(
        title: Text('Form Validation with Riverpod and riverpod_validator'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(labelText: 'Name'),
              onChanged: (value) => formNotifier.setName(value),
              controller: TextEditingController(text: formState.name),
              errorText: formState.validatedName.error,
            ),
            TextField(
              decoration: InputDecoration(labelText: 'Email'),
              onChanged: (value) => formNotifier.setEmail(value),
              controller: TextEditingController(text: formState.email),
              errorText: formState.validatedEmail.error,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: formState.isSubmitting
                  ? null
                  : () => formNotifier.submitForm(),
              child: formState.isSubmitting
                  ? CircularProgressIndicator()
                  : Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖管理：在pubspec.yaml中添加flutter_riverpod和riverpod_validator依赖。

  2. Provider设置：使用StateNotifierProvider创建一个表单状态管理提供者formProvider。

  3. 状态管理：定义一个FormNotifier类来管理表单状态，包括名称和电子邮件字段的验证。

  4. 表单状态：使用@freezed注解定义表单状态FormState，包含名称、电子邮件、验证后的名称和电子邮件、提交状态等。

  5. 表单界面：在MyFormScreen中，使用ConsumerWidget从formProvider获取表单状态和更新器，构建包含两个文本字段和一个提交按钮的表单界面。

  6. 验证逻辑：在文本字段的onChanged回调中，调用setName和setEmail方法来更新表单状态并验证输入值。

  7. 提交逻辑：在提交按钮的onPressed回调中，调用submitForm方法来处理表单提交逻辑，并根据验证结果显示错误信息或提交成功信息。

这个示例展示了如何使用riverpod_validator进行简单的表单验证，你可以根据需要扩展和自定义验证逻辑。

回到顶部