Flutter表单处理插件intelligentsia_forms的使用

Flutter表单处理插件intelligentsia_forms的使用

intelligentsia_forms 插件为 Flutter 提供了一套强大的工具来创建可定制的登录和注册表单。它包括用于各种表单字段（如电子邮件、姓名、密码、个人简介、国家、出生日期和性别）的组件。每个组件都支持广泛的自定义选项，包括颜色、字体、图标和布局样式，以提供用户专属体验。

SmartTextFormField

关键特性

  • 高度可定制的组件：创建用户友好的表单。
  • 灵活的样式选项：适用于任何设计主题。
  • 轻松处理用户输入数据：包括验证和数据处理。
  • 预构建的标准表单字段组件：简化开发过程。

组件文档

SmartTextFormField

SmartTextFormField 是一个多功能文本字段组件，适用于电子邮件、密码、用户名和“个人简介”等字段。每种字段类型都有专门的设置以增强用户体验。

功能

  1. 表单类型特定定制

    • 占位符文本、图标、验证和键盘类型根据选择的 formType（如 email, password, aboutMe, 或 userName）进行调整。
    • 表单特定设置，例如切换密码可见性。

  2. 字段标签定制

    • 可以自定义标签的颜色、字体大小和字体粗细。

  3. 提示文本样式

    • 设置自定义提示文本颜色、字体大小和字体粗细。

  4. 图标选项

    • 配置前缀和后缀图标，并支持轮廓图标。
    • 控制图标颜色和大小以保持一致的设计。

  5. 边框样式

    • 调整不同状态（启用、聚焦、错误）下的边框半径和颜色设置。

  6. 错误消息样式

    • 自定义错误消息样式以便于清晰反馈给用户。

  7. 灵活的填充选项

    • 分离内部和外部填充选项。

  8. 数据控制

    • 支持自定义 TextEditingController 和 onChanged 处理程序。
    • 对于“个人简介”这样的字段，可以限制最大和最小行数。

  9. 全局样式

    • 选项设置背景填充颜色和主色调。

  10. 密码切换

    • 对于 password 字段，后缀图标可切换密码可见性。
标准样式
SmartTextFormField SmartTextFormField SmartTextFormField
CountrySelector

CountrySelector 组件允许用户选择国家，并显示所选国家的名称和国旗。

功能

  1. 国家选择回调

    • 调用函数 (onCountrySelected) 并传递所选国家的名称、代码和国旗。

  2. 可定制的字段标签

    • 自定义字段上方显示的标签（文本颜色、字体大小和粗细）。

  3. 提示文本样式

    • 调整提示文本的颜色、字体大小和粗细。

  4. 图标定制

    • 配置前缀和后缀图标（例如国旗和信息图标）。
    • 可以启用或禁用 info 后缀图标。

  5. 刷新栏通知

    • 当点击信息图标时，可以选择显示可自定义内容、持续时间和位置的 Flushbar 消息。

  6. 全局和边框样式

    • 设置主色调、填充色、边框半径和边框样式。

  7. 填充控制

    • 分离内部和外部填充选项。

  8. 国家显示

    • 显示所选国家的名称和国旗在字段内，并对未选中和选中状态进行样式设置。

  9. 国家选择器集成

    • 允许通过模态选择器浏览并选择国家。
标准样式
SmartTextFormField SmartTextFormField SmartTextFormField
DateSelector

DateSelector 组件提供了一个日期选择器，用于选择和显示日期。

功能

  1. 日期选择回调

    • 调用函数 (selectedDate) 并传递所选日期的年、月和日。

  2. 字段标签定制

    • 可调整标签颜色、字体大小和粗细。

  3. 提示文本样式

    • 当没有选择日期时，自定义提示文本样式。

  4. 图标定制

    • 配置前缀图标（日历图标），并设置颜色、大小和轮廓样式。

  5. 填充和边框样式

    • 内部和外部填充选项，以及可定制的边框样式。

  6. 日期约束

    • 最小和最大日期设置以限制选择范围。

  7. 选定日期显示

    • 以格式化样式显示所选日期。

  8. 日期选择器集成

    • 打开带有自定义主色调和填充色的日期选择器模态框。
标准样式
SmartTextFormField SmartTextFormField
GenderSelector

GenderSelector 组件允许用户从可定制的选项中选择性别。

功能

  1. 性别选择回调

    • 调用 onGenderSelected 函数并传递所选性别。

  2. 可定制的字段标签

    • 可调整标签颜色、字体大小和粗细。

  3. 灵活的性别选项

    • 可定制性别选择列表（默认为 ['Male', 'Female']）。

  4. 选项文本样式

    • 可定制字体大小，并根据选择状态动态改变颜色。

  5. 颜色和边框样式

    • 可配置主色调、字体颜色、背景填充和边框半径。

  6. 交互式性别选择

    • 性别选项作为交互按钮，选中选项有独特的样式。
SocialAuthButton

SocialAuthButton 组件提供了一个可定制的按钮用于社交媒体认证。它支持多种社交媒体提供商，包括 Google、Facebook、Apple、Twitter、Pinterest 和 LinkedIn，并允许选择轮廓或实心图标。

功能

  1. 社交媒体提供商支持

    • 包括 Google、Facebook、Apple、Twitter、Pinterest 和 LinkedIn 的图标。
    • 根据选择的提供商自动选择适当的图标。

  2. 轮廓或实心图标

    • 通过设置 outlinedLogo 属性选择轮廓或实心图标风格。

  3. 可定制的背景和填充

    • 设置背景颜色和填充，适用于轮廓和实心图标风格。

  4. 可配置的按钮大小

    • 可定制按钮的宽度和高度以适应设计需求。

  5. 边框半径和阴影

    • 可定制按钮的边框半径，并添加阴影以增加深度。

  6. 点击回调

    • 通过 onTap 回调轻松处理用户交互。
标准样式
SmartTextFormField

安装

在 pubspec.yaml 文件中添加 intelligentsia_forms：

dependencies:
  intelligentsia_forms: ^latest_version

注意事项

CountrySelector 组件使用 Flushbar 包来显示通知。确保在项目中添加 another_flushbar 依赖项。

dependencies:
  flutter:
    sdk: flutter
  another_flushbar: ^1.10.0
  country_picker: ^2.0.9

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Intelligentsia Forms'),
          backgroundColor: IntelligentsiaColors.bg,
        ),
        backgroundColor: IntelligentsiaColors.bg,
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 20),
              
              // 用户名字段
              SmartTextFormField(
                controller: TextEditingController(),
                onChanged: (string) => print("string"),
                formType: FormType.userName,
                primaryColor: Colors.black87,
                enabledBorderSide: const BorderSide(color: IntelligentsiaColors.transparent),
              ),

              // 电子邮件字段
              const SmartTextFormField(
                formType: FormType.email,
              ),

              // 密码字段
              const SmartTextFormField(
                formType: FormType.password,
                primaryColor: Colors.black87, // 可选
                enabledBorderSide: BorderSide(color: IntelligentsiaColors.transparent),
              ),

              // 个人简介字段
              const SmartTextFormField(formType: FormType.aboutMe),

              // 国家选择器
              CountrySelector(onCountrySelected: (countryName, countryCode, countryFlag) {
                print("Country Name: $countryName, Country Code: $countryCode, Country Flag: $countryFlag");
              }),

              // 日期选择器
              DateSelector(
                selectedDate: (int year, int month, int day) {
                  print("Selected Date: Year: $year, Month: $month, Day: $day");
                },
              ),

              // 性别选择器
              GenderSelector(onGenderSelected: (gender) {
                print("Selected gender : $gender");
              }),

              // 社交媒体登录按钮
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    SocialAuthButton(provider: SocialAuthProvider.google, onTap: () {}),
                    SocialAuthButton(provider: SocialAuthProvider.facebook, onTap: () {}),
                    SocialAuthButton(provider: SocialAuthProvider.twitter, onTap: () {}),
                    SocialAuthButton(provider: SocialAuthProvider.pinterest, onTap: () {}),
                    SocialAuthButton(provider: SocialAuthProvider.apple, onTap: () {}),
                    SocialAuthButton(provider: SocialAuthProvider.linkedin, onTap: () {}),
                  ],
                ),
              ),

              // 轮廓样式社交媒体登录按钮
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    SocialAuthButton(provider: SocialAuthProvider.google, onTap: () {}, outlinedLogo: true),
                    SocialAuthButton(provider: SocialAuthProvider.facebook, onTap: () {}, outlinedLogo: true),
                    SocialAuthButton(provider: SocialAuthProvider.twitter, onTap: () {}, outlinedLogo: true),
                    SocialAuthButton(provider: SocialAuthProvider.pinterest, onTap: () {}, outlinedLogo: true),
                    SocialAuthButton(provider: SocialAuthProvider.apple, onTap: () {}, outlinedLogo: true),
                    SocialAuthButton(
                      provider: SocialAuthProvider.linkedin,
                      onTap: () {},
                      outlinedLogo: true,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


intelligentsia_forms 是一个用于简化 Flutter 表单处理的插件。它提供了一种更简洁和高效的方式来处理表单验证、状态管理和数据提交。虽然它可能不是一个广泛使用的插件，但它的设计理念是简化开发者在处理表单时的复杂性。

以下是使用 intelligentsia_forms 的基本步骤和示例：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 intelligentsia_forms 插件的依赖。

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

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

2. 创建表单

接下来，你可以使用 intelligentsia_forms 来创建一个表单。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Intelligentsia Forms Example'),
        ),
        body: MyForm(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(labelText: 'Username'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter a username';
                }
                return null;
              },
            ),
            TextFormField(
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter a password';
                }
                return null;
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  // 表单验证通过，处理提交逻辑
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Form Submitted Successfully')),
                  );
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 使用 intelligentsia_forms 的特性

intelligentsia_forms 提供了一些额外的功能来简化表单处理，例如：

  • 自动验证：可以在用户输入时自动验证表单字段。
  • 表单状态管理：可以方便地管理表单的状态，例如禁用/启用提交按钮。
  • 数据绑定：可以将表单字段与数据模型绑定，简化数据提交和回填。

4. 处理表单提交

在表单提交时，你可以通过 FormState 来获取表单数据，并执行相应的操作。例如：

onPressed: () {
  if (_formKey.currentState!.validate()) {
    // 表单验证通过，处理提交逻辑
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Form Submitted Successfully')),
    );
  }
},
回到顶部