A simple Flutter component capable of using JSON Schema to declaratively build and customize web forms.

Overview

flutter-jsonschema-form

A simple Flutter component capable of using JSON Schema to declaratively build and customize web forms.
Inspired by react-jsonschema-form

Installation

Add dependency to pubspec.yaml

dependencies:
  ...
  flutter_jsonschema_form:
    git:
      url: git://github.com/edlose16b/flutter_jsonschema_form.git
      ref: main

Run in your terminal

flutter packages get

See the File Picker Installation for file fields.

Usage

import 'package:flutter_jsonschema_form/flutter_jsonschema_form.dart';


final jsonSchema = {
  "title": "A registration form",
  "description": "A simple form example.",
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name",
      "default": "Chuck"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    },
    "telephone": {
      "type": "string",
      "title": "Telephone",
      "minLength": 10
    }
  }
}


@override
Widget build(BuildContext context) {
  return Scaffold(
    body: JsonForm(
      jsonSchema: jsonSchema,
      onFormDataSaved: (data) {
        inspect(data);
      },
    ),
  );
}

Additional information

WIP

You might also like...

Fluid layouts allows you to create responsive layout for mobile, web and desktop from a single codebase.

Fluid layouts allows you to create responsive layout for mobile, web and desktop from a single codebase.

Fluid layout aims to help building a responsive experience through all the different screen sizes. Based in the boostrap approach, FluidLayout calculates a padding content (fluid_padding) that changes depending on the parent size. The Fluid widget uses that padding to set its size

Jan 10, 2022

Kraken - a high-performance, web standards-compliant rendering engine based on Flutter.

 Kraken - a high-performance, web standards-compliant rendering engine based on Flutter.

Kraken - a high-performance, web standards-compliant rendering engine based on Flutter.

Jan 7, 2023

Flutter YouTube UI - Web & Mobile: Android | IOS

Flutter YouTube UI - Web & Mobile: Android | IOS

YouTube Clone UI - Flutter Mobile: IOS | Android Mobile Version: Android | IOS @luanbatistadev Open Source Copyright © 2021-present, Luan Batista. Fac

Sep 22, 2022

ID-Card - A Simple ID Card Project Using Flutter

ID-Card - A Simple ID Card Project Using Flutter

ID-CARD A new Flutter project.A simple demonstration of my time in the Dart lang

Jan 26, 2022

A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file.

image_sequence_animator A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file. If you have a G

Dec 22, 2022

A simple UI design with Login, Sign up and Home screens

A simple UI design with Login, Sign up and Home screens

assessment_task A simple UI design with Login, Sign up and Home screens. 📸 ScreenShots If you find this repo helpful to you, please don't forget to s

Nov 2, 2022

A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

Coupon UI Kit A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card. The example contain

Dec 20, 2022

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Dec 29, 2022

A simple animated radial menu widget for Flutter.

A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Jan 7, 2023
Comments
  • Feature Request: Code generation

    Feature Request: Code generation

    Hi, it will be fantastic if this library can be given the option to write out the dart model classes and widgets for the JSON Schema as code also. In other words, rather than just building a form at runtime, allow running it at development time to generate the UI code and JSON serialization classes.

    opened by jacobus 0
Owner
null
This is a simple movies app build it with flutter

Movies App ?? This is a simple app build it with flutter. Features: ?? Get movies from themoviedb.org Search movies See details movies and casting Too

Tony Gonzalez 2 Feb 1, 2021
A simple way to bring drag’n’drop to flutter web

drop_zone is commonly used for file choosing by dragging and dropping a file(s) onto a designated widget. The user can then use the dropped html file(s).

Derrick Liu 32 Aug 2, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
It is too hard to build coherent and accessible themes with the right colors. This should help.

Color Studio It is hard to choose colors. Most color pickers give you 16 million colors and ask you to pick one. So many options, in fact, that your c

Bernardo Ferrari 372 Dec 22, 2022
I am trying to teach Responsive Ui design. This video for Web and Mobile. This design is suitable for Desktop, Tab, and Mobile platforms.

before clone the GitHub repository please give a star on the repository. I am trying to teach Responsive Ui design. This video for Web and Mobile. Thi

Blackshadow Software Ltd 22 Sep 1, 2022
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Habib ullah 3 May 15, 2022
A package to help build customisable timelines in Flutter.

TimelineTile A package to help build customisable timelines in Flutter. Example You can access the example project for a Timeline Showcase. The Beauti

null 549 Jan 6, 2023
Build Beautiful UIs with Flutter Widgets

I learnt this following thing from this project How to create Stateless Widgets What is the difference between hot reload and hot refresh and running

Chitraarasu.k 2 Dec 31, 2021
Build flexible layouts with constraints, Similar to Android ConstraintLayout

Flutter ConstraintLayout Build flexible layouts with constraints, Similar to Android ConstraintLayout. No matter how complex the layout is and how dee

fangbing chen 247 Jan 5, 2023
Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

flutter_quize A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

IQBAL HASAN 3 Aug 24, 2022