FormStack

Comprehensive Library for Creating Dynamic Form

FormStack is a library designed to help developers create dynamic user interfaces in Flutter. Specifically, the library is focused on creating forms and surveys using a JSON or Dart language model.

The primary goal of FormStack is to make it easy for developers to create dynamic UIs without having to write a lot of code. By using a JSON or Dart model to define the structure of a form or survey, developers can quickly create UIs that are easy to customize and update.

While the library was initially created to help developers create survey UIs, the focus has expanded to include any type of dynamic application UI. With FormStack, developers can create UIs that are responsive and adaptable to different devices and screen sizes.

Overall, FormStack is a powerful tool for creating dynamic user interfaces in Flutter. It offers a flexible and customizable approach to UI design, allowing developers to create UIs that are easy to use and maintain.

Supported Components

✅ TextFiled - Text
✅ TextFiled - Number
✅ TextFiled - Password
✅ TextFiled - Name
✅ TextFiled - Email
✅ TextFiled - File Picker
✅ TextFiled - OTP View
✅ Cupertino Picker View - Date Only
✅ Cupertino Picker View - Date Time
✅ Cupertino Picker View - Time Only
✅ Single Selection List
✅ Mutiple Selection List
✅ Dropdown List
✅ Smile Rating
✅ Dynamic Key Value Widget
✅ HTML Editor
✅ Location Picker (Using Google Map and Google Place Auto completer API)

Online Demo

Demo Web Application

Dart Versions

Dart >=2.19.6 < 3.0.0

Examples

Simple Example - an example of how to create a UI using FormStack.
DEMO APPLICATION Example - Load from from json file..

Implementation

Follwoing JSON medel will render the above demo screen ui.

{
    "default":
    {
      "backgroundAnimationFile":"assets/bg.json",
      "backgroundAlignment":"bottomCenter",
      "steps":[
        {
          "type": "QuestionStep",
          "title":"My Car",
          "cancellable":false,
          "titleIconAnimationFile":"assets/car.json",
          "nextButtonText":"",
          "autoTrigger":true,
          "inputType":"singleChoice",
          "options":[
             {"key":"CAR_SELECTED","title":"Select A Car"},
             {"key":"CALL_DRIVER","title":"Call Driver Now"}
          ],
          "id":"CHOICE",
          "relevantConditions":[{"id":"CALL_DRIVER","expression":"IN CALL_DRIVER"}]
        },{
          "type": "QuestionStep",
          "title":"Select Car",
          "titleIconAnimationFile":"assets/car.json",
          "nextButtonText":"",
          "autoTrigger":true,
          "inputType":"singleChoice",
          "options":[
             {"key":"AUDI","title":"Audi"},
             {"key":"BENZ","title":"Benz"},
             {"key":"Suzuki","title":"Suzuki"}
          ],
          "id":"CAR_SELECTED",
          "relevantConditions":[{"id":"SMILE","expression":"FOR_ALL"}]
        },{
          "type": "QuestionStep",
          "title":"Call / Ping Driver",
          "titleIconAnimationFile":"assets/car.json",
          "nextButtonText":"",
          "autoTrigger":true,
          "inputType":"singleChoice",
          "options":[
             {"key":"CALL","title":"Call"},
             {"key":"PING","title":"PING"}
          ],
          "id":"CALL_DRIVER"
        },
        {
         "type": "QuestionStep",
         "title":"Are you Happy",
         "text":"",
         "inputType":"smile",
         "id":"SMILE"
       },
        {
          "type": "CompletionStep",
          "autoTrigger":true,
          "nextButtonText":"",
          "title":"Please wait..",
          "id":"IS_COMPLETED"
        }
      ]
    
   }
}

Load single json file from assets folder

     await FormStack.api() .loadFromAsset('assets/app.json');

Load Mutiple json file from assets folder

     await FormStack.api()
                      .loadFromAssets(['assets/app.json', 'assets/full.json']);

Read json file from assets to FormStack

await FormStack.api().buildFormFromJson(
        await json.decode(await rootBundle.loadString('assets/app.json')));

Completion Call back

Here you can implement your logic. Example: if you want to trigger a network call or something like that.


    FormStack.api().addCompletionCallback(
      GenericIdentifier(id: "IS_COMPLETED"),
      onBeforeFinishCallback: (result) async {
        await Future.delayed(const Duration(seconds: 2));/// Replace this line and add your network logic
        return Future.value(true);
      },
      onFinish: (result) {
        debugPrint("Completed With Result : $result");
        FormConfig.setState?.call();
      },
    );

Render Form in UI

 FormStack.api().render()

Set Error dynamicaly

         FormStack.api().setError(
                            GenericIdentifier(id: "email"), "Invalid email,",
                            formName: "login_form");

Set Data dynamicaly

          FormStack.api().setResult({"email": "sudhi.s@live.com"},
                        formName: "login_form");

Disable UI dynamically

          FormStack setDisabledUI(["email"], formName: "login_form")

FormStack setDisabledUI(List

Demo Application Video

New Components

Modify the tag of your web/index.html to load the Google Maps JavaScript API, like so:

<head>

  <!-- // Other stuff -->

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>

Screenshots

Bugs or Requests

If you come across any difficulties, don't hesitate to open an issue on GitHub. If you believe that the library lacks a particular feature, please create a ticket on GitHub, and I'll investigate it. Additionally, I welcome pull requests if you would like to contribute to the project.

Maintainers

Sudhi S