Simple Form Builder

pub package GitHub Stars Platform

满足您所有需求的完整表单生成器

维护者: Tanmoy Karmakar 贡献者: Shayon Sarkar

规格

该库允许您通过包含多种字段类型的 JSON 文件创建完整的表单:textcheckboxmultiselectdatetimedatetimefile upload。此包还提供其他备注选项。

它已100% 用 Dart 编写。❤️

Example Example App Closed Example App Open

安装

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

dependencies:
  simple_form_builder: ^0.0.18

简单用法

要集成 Simple Form Builder,您只需遵循给定的 JSON schema 并将其传递给 formBuilder widget

JSON Schema

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

{
  "status": 1,
  "data": [
    {
      "questions": [
        {
          "question_id": String,
          "fields": ["abvoe 40km/h", "below 40km/h", "0km/h"],
          "_id": "60dc6a3dc9fe14577c30d271",
          "title": "Please provide the speed of vehicle?",
          "description": "please select one option given below",
          "remark": true,
          "type": "multiple",
          "is_mandatory": true
        }
      ]
    }
  ]
}

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: 'FormBuilder Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              FormBuilder(
                initialData: sampleData,
                index: 0,
                showIndex:true,
                // showPrefix
                //radioIcon
                //checklistIcon
                onSubmit: (val) {
                  print(val);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

自定义用法

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

属性 描述
initialData 这是生成表单所需的 map。示例 JSON 格式在 constant.dart 文件中提供
index 如果数据包含多个表单,则传递表单的索引将显示该特定表单的问题
onSubmit 当按下提交按钮时,此函数将接收 map 值并将其传递给给定的函数
showPrefix 此切换将启用或禁用问题前的 prefix 图标
onUpload 这包含用户上传的文件(字符串格式)
showIndex 用于指定是否显示编号

GitHub

查看 Github