简易表单生成器

pub package Platform

一个满足您所有需求的完整表单生成器仍在建设中，该项目基于以下存储库

简易JSON生成器 : Tanmoy Karmakar JSON Schema表单: Instituto Iracema

规格

此库允许您通过JSON文件创建具有多种字段类型的完整表单，如text、checkbox、multiselect、date、time。此包还提供其他备注选项。

它已100% 用 Dart 编写。❤️

安装

将以下内容添加到您的 pubspec.yaml 文件中

dependencies:
  simple_json_form: ^0.0.1

简单用法

要集成简易表单生成器，您只需遵循给定的JSON schema并将其传递给formBuilder小部件即可

JSON Schema

// The complete sample is provided in the global folder that can be used as a reference

{
  "form": [
	{
	  "key": "questions",
	  "properties": [
	    {
	      "key": "identifier_boat",
	      "fields": ["1", "2", "3", "4", "5"],
	      "title": "This is my title",
	      "description": "This is my description",
	      "remark": true,
	      "remark_label": "points",
	      "remark_title": "insert to points",
	      "type": "multiple",
	      "direction": "",
	      "is_mandatory": false,
	      "validations": {
              "message": "This is my message",
		      "length": {"min": 10, "max": 20}
	      }
	    },
	  ]
	},
  ]
}

Widget实现

import 'package:flutter/material.dart';
import 'package:simple_form_builder/formbuilder.dart';
import 'package:simple_form_builder/global/constant.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Json Form Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              SimpleJsonForm(
                jsonSchema: sampleData,
                title: "My Title",
                titleStyle: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
                description: "My description",
                crossAxisAlignment: CrossAxisAlignment.center,
                index: 0,
                imageUrl: fileUpload(),
                submitButtonText: 'Send',
                nextButtonText: 'Next',
                previousButtonText: 'Previous',
                onSubmit: (val) {
                  if (val == null) {
                    print("no data");
                  } else {
                    var json = jsonEncode(val.toJson());
                    print(json);
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

自定义用法

有几个选项可以提供更多控制

属性 描述
jsonSchema 用于生成表单的JSON Schema。
crossAxisAlignment 用于通用表单的crossAxisAlignment。
padding 用于通用表单的padding。
title 用于表单的通用标题。
titleStyle 用于表单标题的标题样式。
描述 用于表单的通用描述。
descriptionStyle 用于表单描述的描述样式。
submitButtonText 用于提交按钮的文本。
previousButtonText 用于上一页按钮的文本。
nextButtonText 用于下一页按钮的文本。
index 如果数据包含多个表单，通过传递表单索引将显示特定表单的问题。
onSubmit 此函数将在按下提交按钮时接收map值并将其传递给给定的函数。
loading 用于加载表单的小部件。
validationTitle 用于对话框信息的文本。
validationDescription 用于对话框信息的文本。

GitHub

查看 Github