Flutter表单构建插件flutter_form_kit的使用

flutter_form_kit

这是一个用于构建具有自定义功能的漂亮表单的开源替代品。

表单演示

图像 1	图像 2	图像 3

图像 4	图像 5

完整包YouTube视频过程

简单集成

添加表单非常简单，查看示例项目以了解更多信息。

图像布局支持

在中间：表单元素位于其他元素之间。
右对齐：表单元素向右对齐。
左对齐：表单元素向左对齐。
右扩展：表单元素扩展并右对齐。
左扩展：表单元素扩展并左对齐。
背景：表单元素用作背景元素。

表单支持

短文本：适用于短文本的布局。
多项选择：适用于多项选择选项的布局。
联系信息：适用于联系信息的布局。
地址：适用于地址信息的布局。
电话号码：适用于电话号码信息的布局。
长文本：适用于较长文本的布局。
是或否：适用于是或否选项的布局。

待办事项

[ ] Web支持
[ ] 图像布局
[ ] 验证
[ ] 更多主题定制
[ ] 添加更多答案布局
[ ] 移动端支持

给仓库点赞

如果您觉得这个项目有帮助，请务必给它一个闪耀的星星 🌟

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Survey App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: FlutterForm(
          form: FlutterFormData(
            name: "Survey Form",
            themeColor: Colors.redAccent,
            showLogo: false,
            pages: [
              FlutterFormPage(
                heading: "基本信息",
                imageLayout: ImageLayout.leftExpanded,
                image: "https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
                description: "请提供一些基本信息。",
                answerType: AnswerType.shortText,
              ),
              FlutterFormPage(
                  heading: "最喜欢的颜色",
                  description: "你最喜欢的颜色是什么？",
                  imageLayout: ImageLayout.rightExpanded,
                  image: "https://images.unsplash.com/photo-1533109721025-d1ae7ee7c1e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
                  answerType: AnswerType.multipleChoice,
                  options: ["红色", "蓝色", "绿色"]
              ),
              FlutterFormPage(
                heading: "联系方式",
                description: "让我们知道如何联系你。",
                answerType: AnswerType.contactInfo,
              ),
              FlutterFormPage(
                heading: "地址",
                description: "请提供你的地址。",
                answerType: AnswerType.address,
              ),
              FlutterFormPage(
                heading: "电话号码",
                description: "你的电话号码是多少？",
                answerType: AnswerType.phoneNumber,
              ),
              FlutterFormPage(
                heading: "反馈",
                description: "分享你的想法。",
                answerType: AnswerType.longText,
              ),
              FlutterFormPage(
                heading: "满意度",
                description: "你对我们服务满意吗？",
                answerType: AnswerType.yesNo,
              ),
            ],
            onFormSubmitted: (pages) {
              for (var element in pages) {
                debugPrint(element.toJson().toString());
                debugPrint("文本: ${element.controller.text}");
                debugPrint("选中的选项: ${element.selectedOptions}");
                debugPrint("表单字段: ${element.formField}");
                debugPrint("---");
              }
            },
            onPageEdited: (page) {},
          )),
    );
  }
}

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

gougou168 1楼

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

当然，下面是一个关于如何在Flutter项目中使用flutter_form_kit插件来构建表单的示例代码。flutter_form_kit是一个强大的表单构建库，可以帮助你快速创建和管理表单。

首先，确保你的pubspec.yaml文件中已经添加了flutter_form_kit依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_form_kit: ^x.y.z  # 请替换为最新版本号

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

接下来是一个简单的示例，展示如何使用flutter_form_kit来构建一个登录表单：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form Kit Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginFormScreen(),
    );
  }
}

class LoginFormScreen extends StatefulWidget {
  @override
  _LoginFormScreenState createState() => _LoginFormScreenState();
}

class _LoginFormScreenState extends State<LoginFormScreen> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              FFKTextField(
                name: 'email',
                label: 'Email',
                validator: (value) {
                  if (value == null || value.isEmpty || !value.contains('@')) {
                    return 'Please enter a valid email address.';
                  }
                  return null;
                },
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.email),
                ),
              ),
              SizedBox(height: 16),
              FFKPasswordField(
                name: 'password',
                label: 'Password',
                validator: (value) {
                  if (value == null || value.isEmpty || value.length < 6) {
                    return 'Password must be at least 6 characters long.';
                  }
                  return null;
                },
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.lock),
                ),
              ),
              SizedBox(height: 24),
              FFKButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // Handle form submission
                    print('Form submitted');
                    // Example: Retrieve form values
                    final formValues = FFKForm.of(context).values;
                    print('Email: ${formValues['email']}');
                    print('Password: ${formValues['password']}');
                  }
                },
                child: Text('Login'),
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的登录表单，包含电子邮件和密码字段，以及一个登录按钮。我们使用了flutter_form_kit提供的FFKTextField和FFKPasswordField小部件来创建这些字段，并使用FFKButton来创建登录按钮。

注意以下几点：

表单验证：我们为每个字段添加了验证器，这些验证器在表单提交时被调用。如果验证失败，将返回错误消息。
获取表单值：在按钮点击事件中，我们首先验证表单，如果验证通过，则使用FFKForm.of(context).values获取表单字段的值。

这个示例展示了如何使用flutter_form_kit快速构建和管理表单，包括字段验证和表单值获取。你可以根据需要进一步自定义和扩展这个示例。