Flutter JSON转表单插件json_to_form的使用

简介

json_to_form 是一个用于将 JSON 转换为表单的 Flutter 插件。通过这个插件，您可以轻松地从 JSON 数据生成动态表单。

安装

在 pubspec.yaml 中添加依赖

dependencies:
  json_to_form: "^0.0.1"

安装包

在命令行中运行以下命令来安装包：

$ flutter packages get

导入库

import 'package:json_to_form/json_schema.dart'; 

使用示例

基本用法

创建表单字符串

String formString = json.encode({
    'title': 'form example',
    'description': '',
    'fields': [
        {
            'key': 'inputKey',
            'type': 'Input',
            'label': 'Hi Group',
            'placeholder': "Hi Group flutter",
            'required': true
        },
        {
            'key': 'emailKey',
            'type': 'Email',
            'label': 'Email',
            'placeholder': "Enter your email",
            'required': true
        }
    ]
});

创建表单 Map

Map formMap = {
    'title': 'form example',
    'description': '',
    'fields': [
        {
            'key': 'inputKey',
            'type': 'Input',
            'label': 'Hi Group',
            'placeholder': "Hi Group flutter",
            'required': true
        },
        {
            'key': 'emailKey',
            'type': 'Email',
            'label': 'Email',
            'placeholder': "Enter your email",
            'required': true
        }
    ]
};

构建表单组件

dynamic response;

new JsonSchema(
    form: formString,
    onChanged: (dynamic response) {
        this.response = response;
    },
    actionSave: (data) {
        print(data);
    },
    buttonSave: new Container(
        height: 40.0,
        color: Colors.blueAccent,
        child: Center(
            child: Text("Login", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
        ),
    ),
)

验证和装饰

Map decorations = {
    'inputKey': InputDecoration(
      labelText: "Enter your email",
      prefixIcon: Icon(Icons.account_box),
      border: OutlineInputBorder(),
    ),
};

Map validations = {
    'inputKey': (field, value) {
        if (value.isEmpty) {
            return 'Please enter some text';
        }
        return null;
    }
};

new JsonSchema(
    decorations: decorations,
    validations: validations,
    form: formString,
    onChanged: (dynamic response) {
        this.response = response;
    },
    actionSave: (data) {
        print(data);
    },
    buttonSave: new Container(
        height: 40.0,
        color: Colors.blueAccent,
        child: Center(
            child: Text("Login", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
        ),
    ),
)

示例 Demo

以下是一个完整的示例 Demo，展示了如何使用 json_to_form 插件创建一个包含输入框、密码框、电子邮件框和多行文本框的表单。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:json_to_form/json_schema.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyHomePage(title: 'JSON to Form Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  dynamic response;

  @override
  Widget build(BuildContext context) {
    String formString = json.encode({
      'title': 'Form Example',
      'description': '',
      'fields': [
        {
          'key': 'inputKey',
          'type': 'Input',
          'label': 'Name',
          'placeholder': "Enter your name",
          'required': true
        },
        {
          'key': 'passwordKey',
          'type': 'Password',
          'label': 'Password',
          'placeholder': "Enter your password",
          'required': true
        },
        {
          'key': 'emailKey',
          'type': 'Email',
          'label': 'Email',
          'placeholder': "Enter your email",
          'required': true
        },
        {
          'key': 'textareaKey',
          'type': 'TextArea',
          'label': 'Message',
          'placeholder': "Enter your message",
          'required': true
        }
      ]
    });

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            JsonSchema(
              form: formString,
              onChanged: (dynamic response) {
                this.response = response;
              },
              actionSave: (data) {
                print(data);
              },
              buttonSave: Container(
                height: 40.0,
                color: Colors.blueAccent,
                child: Center(
                  child: Text(
                    "Submit",
                    style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

结论

通过使用 json_to_form 插件，您可以方便地从 JSON 数据生成动态表单，并且可以自定义验证和装饰。希望这个示例能够帮助您快速上手并应用到您的项目中。如果您有任何问题或建议，请随时与社区分享！🔥 Star and Share 🔥 the repo to support the project. Thanks!