Comprehensive Library for Creating Dynamic Form

Platform License: MIT FormStack Library version License: MIT

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

Dart Versions

  • Dart >=2.19.6 < 3.0.0



Follwoing JSON medel will render the above demo screen ui.

          "type": "QuestionStep",
          "title":"My Car",
             {"key":"CAR_SELECTED","title":"Select A Car"},
             {"key":"CALL_DRIVER","title":"Call Driver Now"}
          "relevantConditions":[{"id":"CALL_DRIVER","expression":"IN CALL_DRIVER"}]
          "type": "QuestionStep",
          "title":"Select Car",
          "type": "QuestionStep",
          "title":"Call / Ping Driver",
         "type": "QuestionStep",
         "title":"Are you Happy",
          "type": "CompletionStep",
          "title":"Please wait..",

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.

      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");

Render Form in UI


Set Error dynamicaly

                            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

FormStack Demo Application Video

New Components

File Uploader Dynamic Component OTP
HTML Editor Location Pickerr

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


  <!-- // Other stuff -->

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


img1 img2
img3 img4
img5 img6
img7 img8
img10 img11

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.