{"id":16647746,"url":"https://github.com/liodali/dynamicformflutter","last_synced_at":"2025-04-09T16:21:41.958Z","repository":{"id":38026834,"uuid":"248765621","full_name":"liodali/DynamicFormFlutter","owner":"liodali","description":"Flutter widget to build forms with easier way","archived":false,"fork":false,"pushed_at":"2022-06-11T12:25:40.000Z","size":476,"stargazers_count":10,"open_issues_count":4,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T16:21:25.343Z","etag":null,"topics":["dart","flutter","library"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/dynamic_form","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liodali.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-20T13:44:06.000Z","updated_at":"2024-01-28T01:29:36.000Z","dependencies_parsed_at":"2022-08-28T21:51:40.237Z","dependency_job_id":null,"html_url":"https://github.com/liodali/DynamicFormFlutter","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liodali%2FDynamicFormFlutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liodali%2FDynamicFormFlutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liodali%2FDynamicFormFlutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liodali%2FDynamicFormFlutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liodali","download_url":"https://codeload.github.com/liodali/DynamicFormFlutter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065291,"owners_count":21041872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","flutter","library"],"created_at":"2024-10-12T08:45:41.653Z","updated_at":"2025-04-09T16:21:41.933Z","avatar_url":"https://github.com/liodali.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dynamicform\n![pub](https://img.shields.io/badge/pub-v0.23.0-orange) ![GitHub](https://img.shields.io/github/license/liodali/checkbox_grouped)\n\n\ncreate your form with easier way\n\n## Getting Started\n\n * Generate custom form\n * Form Controller to manage form\n * login Form\n * payment form\n * Pre-existing elements\n\n## Installing\n\nAdd the following to your `pubspec.yaml` file:\n\n    dependencies:\n\t\tdynamic_form: ^0.23.0\n\n\n\n\n## Simple Usage\n#### Creating a basic `SimpleDynamicForm`:\n\n```dart\n        SimpleDynamicForm(\n                  controller: controller,\n                  groupElements: [\n                          GroupElement(\n                                        directionGroup: DirectionGroup.Vertical,\n                                        textElements: [\n                                        TextElement(\n                                          id:\"name\",\n                                          label: \"name\",\n                                        ),\n                                        TextElement(\n                                            id:\"password\",\n                                             label: \"password\", \n                                             typeInput: TypeInput.Password,\n                                        )\n                                    ],\n                                )\n                              ],\n                          );\n```\n\n\n\n####  `Properties in SimpleDynamicForm`\n\n | Properties                     | Description                                                    |\n | ------------------------------ | -------------------------------------------------------------- |\n | `groupElements`                | list of element to build your form                             |\n | `padding`                      |  The amount of space by which to inset the form                |\n | `controller`                   |  The FormController to get values and validate your form       |\n | `submitButton`                 |  (Widget) custom submit Widget that you want to add to the form |\n\n\n### Declare FormController to get validation,list values of forms\n\n```dart\n FormController controller = FormController();\n```\n\u003e you can access to controller from your submit button\n\u003e\n```dart\n FormController controller = SimpleDynamicForm.of(context);\n```\n### validate forms\n\n```dart\ncontroller.validate();\n```\n\n### show error to forms fields  after validation\n* error will be cleared automatically when form validate\n```dart\n controller.addErrorToField(String idField,String errorMessage);\n```\n\n\n### recuperate all values in form :\n```dart\n controller.getAllValues();\n```\n\n\u003e if you are used ids in element,  you can recuperate values with their ids\n\n```dart\n Map values = controller.getByIds();\n```\n\n\u003e you recuperate by id\n\n```dart\n controller.getValueById(id);\n```\n### set input value in form :\n\n\u003e you can change field value using id of that field\n\n```dart\n controller.setFieldValueById(id,value);\n```\n### clear  all inputs in form :\n\n```dart\n controller.clearValues();\n```\n\n\n## LoginForm\n\u003e pre-existing login form to make easy for you to build\n\n### Simple Usage\n\n#### Creating a basic `LoginForm` :\n\n\n```dart\n  \n    LoginForm(\n          controller:controller\n          submitLogin:RaisedButton(\n           onPressed: () {\n                final email = controller.email;\n                final password = controller.password;\n                print(\"$email,$password\");\n              },\n          child: Text(\"Log In\"),\n         ),\n          onlyEmail: false,\n          textButton: Text(\"Log IN\"),\n          paddingFields: const EdgeInsets.all(0),\n          decorationLoginForm: DecorationLoginForm(\n            commonDecoration: decoration,\n            decorationEmailElement: OutlineDecorationElement(\n                contentPadding: EdgeInsets.only(\n                left: 12.0,\n              ),\n            ),\n            decorationPasswordElement: OutlinePasswordElementDecoration(\n                contentPadding: EdgeInsets.only(left: 8),\n                prefix: Padding(\n                   padding: EdgeInsets.all(6.0),\n                   child: Icon(\n                      Icons.lock,\n                      size: 20,\n                  ),\n            ),\n            enableVisibilityPassword: false\n      ),\n    )\n```\n\n\n### LoginFormController \n\n * validate login form\n * recuperate email/password\n * show error in specific input\n\n1) initialization\n\n```dart\nLoginFormController controller = LoginFormController();\n```\n2) recuperate email/Username,password\n```dart\nfinal email = controller.email;\nfinal password = controller.password;\n```\n3) access to controller in submit button \n\n```dart\n LoginFormController controller = LoginForm.of(context)\n```\n\n\n4) show field error after validation (use case when auth failed)\n\n```dart\n controller.addEmailError(\"invalid Email not found\");\n controller.addPasswordError(\"invalid Email not found\");\n```\n\n\n5) Properties\n\n | Properties                     | Description                                                    |\n | ------------------------------ | -------------------------------------------------------------- |\n | `controller`                   | LoginFormController to validate login form and get data                             |\n | `decorationLoginForm`          | (DecorationLoginForm) contain configuration of the inputs decoration of email/password fields in form                             |\n | `directionGroup`               | Direction of form (Vertical/Horizontal)                        |\n | `paddingFields`                | padding between fields                                         |\n | `onlyEmail`                    | enable only email type textField                               |\n | `passwordError`                | messages errors to show  when password field not validate      |\n | `usernameEmailError`           | messages errors to show when email/username not validate       |\n | `submitLogin`                  | (Widget) Button of submit form                |\n\n\n## PaymentForm\n\n* pre-existing payment form to make easy for you to build\n\n1) Simple Usage\n\n#### Creating a basic `PaymentForm` :\n\n```dart\n    PaymentForm(\n          controller:controller,\n          decorationElement: OutlineDecorationElement(),\n          errorMessageCVV: \"cvv is invalid\",\n          errorMessageDateExpiration: \"date expiration is invalid\",\n          errorIsRequiredMessage: \"This field  is required\",\n          labelCVV: \"cvv\",\n          labelDateExpiration: \"date expiration\",\n          labelCardNumber: \"card number\",\n          submitButton: ElevatedButton(\n            onPressed: () {\n              controller.validate();\n            },\n            child: Text(\"pay\"),\n          ),\n        )\n```\n\n### PaymentController\n\n1) initialization\n\n```dart\nPaymentController controller = PaymentController();\n```\n2) validation payment form\n```dart\nbool isValid = controller.validate();\n```\n3) recuperate cardNumber,cvv,dateExpiration\n\n```dart\nfinal cardNumber = controller.cardNumber;\nfinal cvv = controller.cvv;\nfinal dateExpiration = controller.dateExpiration;\n```\n5) access to payment controller inside payment submit button\n\n```dart\n PaymentController controller = PaymentForm.of(context);\n```\n\n6) show field error after validation (use case when card check failed)\n\n```dart\n controller.addCardNumberError(errorMessage);\n controller.addCVVError(errorMessage);\n controller.addDateExpirationError(errorMessage);\n```\n\n7) `Properties\n\n | Properties                     | Description                                                    |\n | ------------------------------ | -------------------------------------------------------------- |\n | `controller`                   | (PaymentController) controller to validate form,setError fields,clear values                           |\n | `entryModeDateExpiration`      | (DateExpirationEntryMode)   input type of card date expiration can be dropdown or input(textField)                           |\n | `decorationElement`            | decoration of all input field in form                             |\n | `buttonDecoration`             | decoration of button that contain radius,backgroundColor,width |\n | `errorMessageDateExpiration`   | messages errors to show  when Date Expiration field not validate      |\n | `errorMessageCVV`              | messages errors to show when cvv field is invalidate            |\n | `errorMessageCardNumber`       | messages errors to show when credit card number is invalidate   |\n | `errorIsRequiredMessage`       | messages errors to show when at least one field not filled      |\n | `labelCardNumber`              | text label of credit card number field                          |\n | `labelDateExpiration`          | text label of date expiration field                             |\n | `labelCVV`                     | text label of cvv field                                         |\n | `submitButton`                 | (widget) submit button widget                                         |\n\n\n## API\n### How to sketch your form ?\n\n\u003e ` textElement is small element in dynamicForm `\n\u003e ` GroupElement is group of TextElement`\n\n####  `GroupElement`\n| Properties          | Description                                                                                  |\n| ------------------- | -------------------------------------------------------------------------------------------- |\n| `directionGroup`    | Direction of form (Vertical/Horizontal)                                                      |\n| `sizeElements`      | size of each textElement  of form When direction Horizontal,sum of values should be egal a 1 |\n| `textElements`      | group of textElement.                                                                        |\n| `padding`           | padding of groups.                                                                           |\n| `decoration`        | decoration  of container groups.                                                             |\n| `backgroundColor`   | color of the container groups.                                                               |\n\n\n####  `textElement`\n| Properties          | Description                                    |\n| ------------------- | ---------------------------------------------- |\n| `typeInput`         | Enumerate to specifie type of TextField.       |\n| `label`             | text label of TextField.                       |\n| `DecorationElement` | input decoration of TextField.                 |\n| `onTap`             | callback when you click on TextField .         |\n| `hint`              | text hint of textField.                        |\n| `errorMsg`          | message to show when TextField isn't validate. |\n| `labelStyle`        | style of label TextField                       |\n| `errorStyle`        | style of error message TextField               |\n| `hintStyle`         | style of hint TextFieldcolor                   |\n| `readOnly`          | enable TextField uneditable                    |\n| `validator`         | callback validation of TextField               |\n| `padding`           | padding of TextField                           |\n| `visibility`        | enable visibility of element                   |\n\n### `EmailElement`\n\n\u003e Pre-exsiting element\n\n\u003e check validation of email\n\n\u003e Pre-initialized values\n\n\u003e extends from TextElement\n\n\n| Properties             | Description                                                         |\n| ---------------------- | ------------------------------------------------------------------- |\n| `DecorationElement`    | input decoration of TextField.                                      |\n| `label`                | text label of TextField.                                            |\n| `hint`                 | text hint of textField.                                             |\n| `isRequired`           | make textField required in validation                               |\n| `errorEmailIsRequired` | error message for textField when it's required                      |\n| `errorEmailPattern`    | error message for textField input when it's not email in validation |\n| `labelStyle`           | style of label TextField                                            |\n| `errorStyle`           | style of error message TextField                                    |\n| `hintStyle`            | style of hint TextFieldcolor                                        |\n| `readOnly`             | enable TextField uneditable                                         |\n| `padding`              | padding of TextField                                                |\n\n### `PasswordElement`\n\n\n\u003e Pre-exsiting element\n\n\u003e check validation of password\n\n\u003e Pre-initialized values\n\n\u003e show/hide password\n\n\u003e extends from TextElement\n\n| Properties                 | Description                                                                 |\n| -------------------------- | --------------------------------------------------------------------------- |\n| `DecorationElement`        | input decoration of TextField.                                              |\n| `label`                    | text label of TextField.                                                    |\n| `hint`                     | text hint of textField.                                                     |\n| `errorMsg`                 | message to show when TextField isn't validate.                              |\n| `labelStyle`               | style of label TextField                                                    |\n| `errorStyle`               | style of error message TextField                                            |\n| `hintStyle`                | style of hint TextFieldcolor                                                |\n| `readOnly`                 | enable TextField uneditable                                                 |\n| `padding`                  | padding of TextField                                                        |\n| `enableShowPassword`       | enable eye icon,make password text visible                                  |\n| `isRequired`               | make passwordField required                                                 |\n| `minLength`                | minimun length accepted by password                                         |\n| `hasUppercase`             | make password contains at least one upperCase character                     |\n| `hasSpecialCharacter`      | make password contains at least one special character                       |\n| `hasDigits`                | make password contains at least one digits                                  |\n| `requiredErrorMsg`         | message error to show when password is required                             |\n| `minLengthErrorMsg`        | message error to show when password length is less then the specified       |\n| `uppercaseErrorMsg`        | message error to show when password doesn't contain any upperCase character |\n| `specialCharacterErrorMsg` | message error to show when password doesn't contain any special character   |\n\n\n### `NumberElement`\n\n\n\u003e Pre-exsiting element for Number input\n\n\u003e Pre-initialized values\n\n\u003e enabled digitsOnly\n\n\u003e extends from TextElement\n\n| Properties          | Description                                    |\n| ------------------- | ---------------------------------------------- |\n| `label`             | text label of TextField.                       |\n| `hint`              | text hint of textField.                        |\n| `DecorationElement` | input decoration of TextField.                 |\n| `errorMsg`          | message to show when TextField isn't validate. |\n| `labelStyle`        | style of label TextField                       |\n| `errorStyle`        | style of error message TextField               |\n| `hintStyle`         | style of hint TextFieldcolor                   |\n| `readOnly`          | enable TextField uneditable                    |\n| `padding`           | padding of TextField                           |\n| `isDigits`          | enable only digit number                       |\n\n\n### `CountryElement`\n\n\n\u003e Pre-exsiting element for Country input\n\n\u003e Pre-initialized values\n\n\u003e pick country via BottomSheet\n\n\u003e show flag of countries\n\n\n| Properties              | Description                                   |\n| ----------------------- | --------------------------------------------- |\n| `DecorationElement`     | input decoration of TextField.                |\n| `label`                 | text label of TextField.                      |\n| `initValue`             | Initiale Value to country input.              |\n| `labelModalSheet`       | Title of modalSheet                           |\n| `labelSearchModalSheet` | hint search textfield in BottomSheet          |\n| `countryTextResult`     | enumeration get result of selection countries |\n| `showFlag`              | show flag of countris in modalsheet           |\n| `padding`               | padding of TextField                          |\n| `readonly`              | when enable  TextField to be unmodified       |\n\n### `PhoneNumberElement`\n\n\n\u003e Pre-exsiting element for phone number input\n\n\u003e Pre-initialized values\n\n\n#### `To Do` in `PhoneNumberElement`\n\n- [ ] pick calling phone via BottomSheet\n\n- [ ] show flag of countries for each calling code\n\n### `Properties`\n\n| Properties          | Description                                                  |\n| ------------------- | ------------------------------------------------------------ |\n| `DecorationElement` | input decoration of TextField.                               |\n| `label`             | text label of TextField.                                     |\n| `hint`              | text placeholder for phone number input.                     |\n| `initValue`         | initial Value to phone input.                             |\n| `errorMsg`          | text error message                                           |\n| `validator`         | callback validation of TextField                             |\n| `showPrefixFlag`    | enable flag country to be visible at left  of TextField      |\n| `showSuffixFlag`    | enable flag country to be visible at rigth of TextField      |\n| `padding`           | padding of TextField                                         |\n| `showPrefix`        | show calling phone number(get current calling phone of user) |\n| `readOnly`          | bool make TextField readOnly                                 |\n| `initPrefix`        | (String) initial calling code of the specific country                                |\n| `labelModalSheet`   | (String) title of bottom sheet that shown list of calling code of countries                                |\n\n###  `TextAreaElement`\n\n\u003e Pre-exsiting element for multiLine  input (like commentField)\n\u003e Pre-initialized values\n\n\n| Properties     | Description                                                           |\n| -------------- | --------------------------------------------------------------------- |\n| `maxLines`     | maximum line  to span in textField.                                   |\n| `showCounter`  | enable visibility of counterText.                                     |\n| `maxCharacter` | The limit on the number of characters that you can type  in textField |\n\n###  `DateElement`\n\n\u003e Pre-exsiting element for date field  input\n\u003e Pre-initialized values\n\n| Properties               | Description                                                           |\n| ------------------------ | --------------------------------------------------------------------- |\n| `id`                     | String,should be unique,\n| `initDate`               | (DateTime)  initialize the input field\n| `firstDate]`             | (DateTime)  represent earliest allowable Date in date picker\n| `lastDate`               | (DateTime)  represent latest allowable Date in date picker\n| `format`                 | (DateFormat)  for format the date  that you pick (default :DateFormat.yMd())\n| `selectableDayPredicate` | (SelectableDayPredicate)  to enable dates to be selected\n| `label`                  | (String) text label of TextField\n| `decorationElement`      | input decoration of TextField\n| `hint`                   | (String) hint text of textField\n| `isRequired`             | (bool) if true,make this field required\n| `errorMsg`               | (String) show error message  when the field isn't validate\n| `padding`                | (EdgeInsets) padding of textField\n\n\n###  `RadioGroupElement`\n\n\u003e Pre-exsiting element for radioGroup field  input\n\u003e Pre-initialized values\n\n| Properties               | Description                                                           |\n| ------------------------ | --------------------------------------------------------------------- |\n| `id`                     | String,should be unique,\n| `initValue`              | (String)  initialized select value of the radio group  field\n| `label`                  | (String) text label of the radio group field\n| `labelAlignment`         | (AlignmentGeometry)  label text alignment\n| `activeSelectedColor`    | (Color) active select radio in the radio group field\n| `decorationElement`      | input decoration of TextField\n| `errorMsg`               | (String) error message that will show when error\n| `values`                 | (List\u003cString\u003e) list of values of each selected item \n| `valuesLabel`            | (List\u003cString\u003e) list of labels of each item in the radio group\n| `padding`                | (EdgeInsets) padding of textField\n\n\n### `DecorationElement`\n\n\u003e abstract class\n\n\u003e Pre-exsiting inputDecoration for  TextFormField\n\n\u003e Pre-initialized values\n\n\u003e Typically one of `UnderlineDecorationElement` or `OutlineDecorationElement` or `RoundedDecorationElement` can be used.\n\n##### `UnderlineDecorationElement`\n\n\n| Properties            | Description                                                                       |\n| --------------------- | --------------------------------------------------------------------------------- |\n| `borderColor`         | The border Color to display when the InputDecorator does not have the focus.      |\n| `errorBorderColor`    | The borwidthLineder Color to display when the InputDecorator does have the error. |\n| `focusBorderColor`    | The border Color to display when the InputDecorator does  have the focus.         |\n| `disabledBorderColor` | The border Color to display when the InputDecorator is disabled.                  |\n| `radius`              | radius of the border.                                                             |\n| `widthSide`           | The width of this line of the border                                              |\n| `filledColor`         | base fill color of the decoration                                                 |\n| `focusColor`          | focused fill color of the decoration                                              |\n\n\n##### `OutlineDecorationElement`\n\n| Properties            | Description                                                                       |\n| --------------------- | --------------------------------------------------------------------------------- |\n| `borderColor`         | The border Color to display when the InputDecorator does not have the focus.      |\n| `errorBorderColor`    | The borwidthLineder Color to display when the InputDecorator does have the error. |\n| `focusBorderColor`    | The border Color to display when the InputDecorator does  have the focus.         |\n| `disabledBorderColor` | The border Color to display when the InputDecorator is disabled.                  |\n| `radius`              | radius of the border.                                                             |\n| `widthSide`           | The width of this line of the border                                              |\n| `filledColor`         | base fill color of the decoration                                                 |\n| `focusColor`          | focused fill color of the decoration                                              |\n\n### `RoundedDecorationElement`\n\n\u003e without BorderSide\n\n| Properties    | Description                          |\n| ------------- | ------------------------------------ |\n| `radius`      | radius of the border.                |\n| `filledColor` | base fill color of the decoration    |\n| `focusColor`  | focused fill color of the decoration |\n\n\n### `ButtonLoginDecorationElement`\n\n\u003e decoration for button login\n\n| Properties              | Description                          |\n| ------------------------| ------------------------------------ |\n| `shapeButtonLogin`      | shape of the login button.           |\n| `backgroundColorButton` | ackground color of the login button  |\n| `widthSubmitButton`     | width size of the login button       |\n| `elevation`             | elevation of the button              |\n\n* example \n```dart\n///decoration Element \n final decoration = OutlineDecorationElement(\n                     filledColor: Colors.white,\n                     radius: BorderRadius.only(\n                       topLeft: Radius.circular(5.0),\n                       topRight: Radius.circular(5.0),\n                     ),\n                     widthSide: 0.6,\n                   );\n```\n\n### `PasswordControls`\n\n\u003e define an validation rules for password input\n\n| Properties                 | Description                                                                 |\n| ---------------------------| ----------------------------------------------------------------------------|\n| `minLength`                | minimum length accepted by password                                         |\n| `hasUppercase`             | make password contains at least one upperCase character                     |\n| `hasSpecialCharacter`      | make password contains at least one special character                       |\n| `hasDigits`                | make password contains at least one digits                                  |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliodali%2Fdynamicformflutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliodali%2Fdynamicformflutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliodali%2Fdynamicformflutter/lists"}