Frappe Form #

A Flutter package for rendering Frappe Forms.

This package takes care of building the UI of a Frappe Form, handle behavior and validations and finally generates the Response from the user answers.

Supported DocType form fields #

So far this package supports the following Field Types

Supported extra features #

1. Mandatory Depends On (JS) expressions for validations
2. Read Only Depends On (JS) expressions for validations
3. Display Depends On (JS) expressions for validations
4. Required fields
5. Read only fields
6. Description
7. Default value

How to use #

Just add a DocFormView widget to your widget tree and you will have your Frappe Form UI.

DocFormView(
    form: form, // A Frappe Form instance
    onAttachmentLoaded: onAttachmentLoaded, // A callback to handle attachment loading (explained below) 
    actions: actions, // To add custom actions to the AppBar.
    locale: locale, // The specific locale for the Button and validation texts
    localizations: localizations, // To add support for extra localization 
    isLoading: loading, // Whether is some ongoing operation before loading the UI 
    onSubmit: onSubmit, // Callback when the user wants to submit the Form
    onCancel: onCancel, // Callback when the user wants to cancel the submission of the Form
    onResponse: onResponse, // Callback to get the Form Response
    controller: controller, // The DocFormController to use for item view and response generation
)

DocFormView #

1. DocForm form: DocFormView requires an object of type DocForm this is the definition of the Frappe Form and will be used to build the Form UI and generate the Questions and Answers.
2. Locale? locale: Optionally you can specify the language like "es" or "en" or "fr", etc. you want as a Locale object to use for validation messages and Submit button, by default the system language will be used.
3. List<DocFormBaseLocalization>? localizations: this is a list that allows you to add extra language translations to the Form UI, currently the package supports only English and Spanish, so you can add other Languages, you just need to create a class for each new Language you want to support and extend DocFormBaseLocalization.
4. DocFormBaseLocalization? defaultLocalization: Indicates what should be the fallback localization if the specified language or the system language is not supported, by default English is the fallback.
5. bool isLoading: use this to indicate there is an ongoing operation, for instance if you need to make an API request to load your DocForm you can set isLoading = true so the DocFormView will show a Shimmer loading effect view.
6. Future<Attachment?> Function()? onAttachmentLoaded: To make this package simpler and compatible with all Flutter supported platforms, the feature to load an attachment is delegated to the App, so you have to handle this logic by implementing this function and returning an instance of Attachment.
7. List<Widget>? actions: To add custom actions to the AppBar.
8. Future<bool> Function()? onSubmit: Callback when the user wants to submit Form. Return true to proceed with the submission, false otherwise.
9. Future<bool> Function()? onCancel: Callback when the user wants to cancel the submission of the Form. Return true to allow the cancellation, false otherwise.
10. ValueChanged<Map<String, dynamic>>? onResponse: Get the FormResponse after user taps on Submit button and all Form fields has been processed.
11. DocFormController? controller: This is the controller to be used for questions and response generation within the DocFormView, the purpose of this controller here is to allow you to use an instance of an extension of DocFormController so you can override the behavior and widgets.

Some extra notes #

1. This widget will use the app Theme to build, so if you want to change colors, InputDecorations, etc, you just have to change it in your app Theme. Also all the package widgets are public and exposed so you could override it if necessary.
2. The DocFormView implementation takes care of validations depending on each DocField definition.
3. Check the example project which shows all the features in action.

Demo #

Try example demo app here #