Implementing simple form in Flutter from JSON

Are you tired of creating of building your own form from scratch?

well we have solved your problem by creating a package that does this painful job for you.

simple_form_builder | Flutter Package

Simple form builder uses a specific formated JSON to generate the complete form with validation and file upload capability.

Sample Ui design using Simple_form_builder

This library allows you to create a complete form from a json file with multiple types of fields text , checkbox, multiselect , date and time , and file upload. This package also provides additional remark options.

Installing

Add the following to your pubspec.yaml file:

dependencies:
  simple_form_builder: ^0.0.14

Simple Usage

To integrate the Simple form builder all you need to do is follow the given JSON schema and pass it to the formBuilder widget

Image upload process

To upload image function onUpload is provided. Image_picker package can be used to upload image and save it in server and save the url or you can save the path of the image.

import 'package:image_picker/image_picker.dart';
fileUpload() async {
  final ImagePicker _picker = ImagePicker();
  // Pick an image
  final XFile image = await _picker.pickImage(source:        ImageSource.gallery);
  if (image != null) { 
   return image.path;
  }
}

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 Implementation

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:simple_form_builder/formbuilder.dart';
import 'package:simple_form_builder/global/checklistModel.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,
                onUpload: fileUpload(),
                submitButtonWidth: 0.5,
                submitButtonDecoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10),
                ),
                showIcon: false,
                onSubmit: (ChecklistModel val) {
                  if (val == null) {
                    print("no data");
                  } else {
                    var json = jsonEncode(val.toJson());
                    print(json);
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  String fileUpload() {
    return "string";
  }
}

Custom Usage

There are several options that allow for more control:

initialData:This is the map that is required to generate the form. the sample JSON format is given in the constant.dart file

indexIf the data contains mutiple forms passing the index of the form will show the question of that perticular form

onSubmitThis function will take in the map value and pass it to the given function when submit button is pressed

showPrefixThis toggle will enable or disable prefix icon before the question

onUploadThis contains the file uploaded by user in String

submitButtonWidth This allows to specify the width of the submit button

submitButtonDecoration This allows to specify the decoration of the submit button

Thank you for reading my first post.

for more flutter related work check my profile at:

https://www.tanmoykarmakar.in