dynamicform

pub GitHub

create your form with easier way

Getting Started

  • Generate custom form
  • Form Controller to manage form
  • login Form
  • payment form
  • Pre-existing elements

Installing

Add the following to your pubspec.yaml file:

dependencies:
	dynamic_form: ^0.12.1

Simple Usage

Creating a basic SimpleDynamicForm:

        SimpleDynamicForm(
                  controller: controller,
                  groupElements: [
                          GroupElement(
                                        directionGroup: DirectionGroup.Vertical,
                                        textElements: [
                                        TextElement(
                                          id:"name",
                                          label: "name",
                                        ),
                                        TextElement(
                                            id:"password",
                                             label: "password", 
                                             typeInput: TypeInput.Password,
                                        )
                                    ],
                                )
                              ],
                          );

Properties in SimpleDynamicForm

PropertiesDescription
groupElementslist of element to build your form
paddingThe amount of space by which to inset the form
controllerThe FormController to get values and validate your form
submitButton(Widget) custom submit Widget that you want to add to the form

Declare FormController to get validation,list values of forms

 FormController controller = FormController();

you can access to controller from your submit button

 FormController controller = SimpleDynamicForm.of(context);

validate forms

controller.validate();

show error to forms fields after validation

  • error will be cleared automatically when form validate
 controller.addErrorToField(String idField,String errorMessage);

recuperate all values in form :

 controller.getAllValues();

if you are used ids in element, you can recuperate values with their ids

 Map values = controller.getByIds();

you recuperate by id

 controller.getValueById(id);

clear all inputs in form :

 controller.clearValues();

LoginForm

pre-existing login form to make easy for you to build

Simple Usage

Creating a basic LoginForm :

  
    LoginForm(
          controller:controller
          submitLogin:RaisedButton(
           onPressed: () {
                final email = controller.email;
                final password = controller.password;
                print("$email,$password");
              },
          child: Text("Log In"),
         ),
          onlyEmail: false,
          labelLogin: "Username",
          password: "Password",
          textButton: Text("Log IN"),
          paddingFields: const EdgeInsets.all(0),
          decorationEmailElement: decoration,
          decorationPasswordElement: decoration.copy(
            radius: BorderRadius.only(
              bottomLeft: Radius.circular(5.0),
              bottomRight: Radius.circular(5.0),
            ),
          ),
        )

LoginFormController

  • validate login form
  • recuperate email/password
  • show error in specific input
  1. initialization
LoginFormController controller = LoginFormController();
  1. recuperate email/Username,password
final email = controller.email;
final password = controller.password;
  1. access to controller in submit button
 LoginFormController controller = LoginForm.of(context)
  1. show field error after validation (use case when auth failed)
 controller.addEmailError("invalid Email not found");
 controller.addPasswordError("invalid Email not found");
  1. Properties
PropertiesDescription
controllerLoginFormController to validate login form and get data
decorationEmailElementinput decoration of email field in form
decorationPasswordElementinput decoration of password field in form
directionGroupDirection of form (Vertical/Horizontal)
paddingFieldspadding between fields
onlyEmailenable only email type fieldtext
loginlabel of username/email textField
passwordlabel of the passwordField
passwordErrormessages errors to show when password field not validate
usernameEmailErrormessages errors to show when email/username not validate
submitLogin(Widget) Button of submit form

PaymentForm

  • pre-existing payment form to make easy for you to build
  1. Simple Usage

Creating a basic PaymentForm :

    PaymentForm(
          controller:controller,
          decorationElement: OutlineDecorationElement(),
          errorMessageCVV: "cvv is invalid",
          errorMessageDateExpiration: "date expiration is invalid",
          errorIsRequiredMessage: "This field  is required",
          labelCVV: "cvv",
          labelDateExpiration: "date expiration",
          labelCardNumber: "card number",
          submitButton: ElevatedButton(
            onPressed: () {
              controller.validate();
            },
            child: Text("pay"),
          ),
        )

PaymentController

  1. initialization
PaymentController controller = PaymentController();
  1. validation payment form
bool isValid = controller.validate();
  1. recuperate cardNumber,cvv,dateExpiration
final cardNumber = controller.cardNumber;
final cvv = controller.cvv;
final dateExpiration = controller.dateExpiration;
  1. access to payment controller inside payment submit button
 PaymentController controller = PaymentForm.of(context);
  1. show field error after validation (use case when card check failed)
 controller.addCardNumberError(errorMessage);
 controller.addCVVError(errorMessage);
 controller.addDateExpirationError(errorMessage);
  1. `Properties
PropertiesDescription
controller(PaymentController) controller to validate form,setError fields,clear values
entryModeDateExpiration(DateExpirationEntryMode) input type of card date expiration can be dropdown or input(textField)
decorationElementdecoration of all input field in form
buttonDecorationdecoration of button that contain radius,backgroundColor,width
errorMessageDateExpirationmessages errors to show when Date Expiration field not validate
errorMessageCVVmessages errors to show when cvv field is invalidate
errorMessageCardNumbermessages errors to show when credit card number is invalidate
errorIsRequiredMessagemessages errors to show when at least one field not filled
labelCardNumbertext label of credit card number field
labelDateExpirationtext label of date expiration field
labelCVVtext label of cvv field
submitButton(widget) submit button widget

API

How to sketch your form ?

textElement is small element in dynamicForm GroupElement is group of TextElement

GroupElement

PropertiesDescription
directionGroupDirection of form (Vertical/Horizontal)
sizeElementssize of each textElement of form When direction Horizontal,sum of values should be egal a 1
textElementsgroup of textElement.
paddingpadding of groups.
decorationdecoration of container groups.
backgroundColorcolor of the container groups.

textElement

PropertiesDescription
typeInputEnumerate to specifie type of TextField.
labeltext label of TextField.
DecorationElementinput decoration of TextField.
onTapcallback when you click on TextField .
hinttext hint of textField.
errorMsgmessage to show when TextField isn't validate.
labelStylestyle of label TextField
errorStylestyle of error message TextField
hintStylestyle of hint TextFieldcolor
readOnlyenable TextField uneditable
validatorcallback validation of TextField
paddingpadding of TextField
visibilityenable visibility of element

EmailElement

Pre-exsiting element

check validation of email

Pre-initialized values

extends from TextElement

PropertiesDescription
DecorationElementinput decoration of TextField.
labeltext label of TextField.
hinttext hint of textField.
isRequiredmake textField required in validation
errorEmailIsRequirederror message for textField when it's required
errorEmailPatternerror message for textField input when it's not email in validation
labelStylestyle of label TextField
errorStylestyle of error message TextField
hintStylestyle of hint TextFieldcolor
readOnlyenable TextField uneditable
paddingpadding of TextField

PasswordElement

Pre-exsiting element

check validation of password

Pre-initialized values

show/hide password

extends from TextElement

PropertiesDescription
DecorationElementinput decoration of TextField.
labeltext label of TextField.
hinttext hint of textField.
errorMsgmessage to show when TextField isn't validate.
labelStylestyle of label TextField
errorStylestyle of error message TextField
hintStylestyle of hint TextFieldcolor
readOnlyenable TextField uneditable
paddingpadding of TextField
enableShowPasswordenable eye icon,make password text visible
isRequiredmake passwordField required
minLengthminimun length accepted by password
hasUppercasemake password contains at least one upperCase character
hasSpecialCharactermake password contains at least one special character
hasDigitsmake password contains at least one digits
requiredErrorMsgmessage error to show when password is required
minLengthErrorMsgmessage error to show when password length is less then the specified
uppercaseErrorMsgmessage error to show when password doesn't contain any upperCase character
specialCharacterErrorMsgmessage error to show when password doesn't contain any special character

NumberElement

Pre-exsiting element for Number input

Pre-initialized values

enabled digitsOnly

extends from TextElement

PropertiesDescription
labeltext label of TextField.
hinttext hint of textField.
DecorationElementinput decoration of TextField.
errorMsgmessage to show when TextField isn't validate.
labelStylestyle of label TextField
errorStylestyle of error message TextField
hintStylestyle of hint TextFieldcolor
readOnlyenable TextField uneditable
paddingpadding of TextField
isDigitsenable only digit number

CountryElement

Pre-exsiting element for Country input

Pre-initialized values

pick country via BottomSheet

show flag of countries

PropertiesDescription
DecorationElementinput decoration of TextField.
labeltext label of TextField.
initValueInitiale Value to country input.
labelModalSheetTitle of modalSheet
labelSearchModalSheethint search textfield in BottomSheet
countryTextResultenumeration get result of selection countries
showFlagshow flag of countris in modalsheet
paddingpadding of TextField
readonlywhen enable TextField to be unmodified

PhoneNumberElement

Pre-exsiting element for phone number input

Pre-initialized values

To Do in PhoneNumberElement

  • pick calling phone via BottomSheet

  • show flag of countries for each calling code

Properties

PropertiesDescription
DecorationElementinput decoration of TextField.
labeltext label of TextField.
hinttext placeholder for phone number input.
initValueinitial Value to phone input.
errorMsgtext error message
validatorcallback validation of TextField
showPrefixFlagenable flag country to be visible at left of TextField
showSuffixFlagenable flag country to be visible at rigth of TextField
paddingpadding of TextField
showPrefixshow calling phone number(get current calling phone of user)
readOnlybool make TextField readOnly
initPrefix(String) initial calling code of the specific country
labelModalSheet(String) title of bottom sheet that shown list of calling code of countries

TextAreaElement

Pre-exsiting element for multiLine input (like commentField) Pre-initialized values

PropertiesDescription
maxLinesmaximum line to span in textField.
showCounterenable visibility of counterText.
maxCharacterThe limit on the number of characters that you can type in textField

DateElement

Pre-exsiting element for date field input Pre-initialized values

PropertiesDescription
idString,should be unique,
initDate(DateTime) initialize the input field
firstDate](DateTime) represent earliest allowable Date in date picker
lastDate(DateTime) represent latest allowable Date in date picker
format(DateFormat) for format the date that you pick (default :DateFormat.yMd())
selectableDayPredicate(SelectableDayPredicate) to enable dates to be selected
label(String) text label of TextField
decorationElementinput decoration of TextField
hint(String) hint text of textField
isRequired(bool) if true,make this field required
errorMsg(String) show error message when the field isn't validate
padding(EdgeInsets) padding of textField

DecorationElement

abstract class

Pre-exsiting inputDecoration for TextFormField

Pre-initialized values

Typically one of UnderlineDecorationElement or OutlineDecorationElement or RoundedDecorationElement can be used.

UnderlineDecorationElement
PropertiesDescription
borderColorThe border Color to display when the InputDecorator does not have the focus.
errorBorderColorThe borwidthLineder Color to display when the InputDecorator does have the error.
focusBorderColorThe border Color to display when the InputDecorator does have the focus.
disabledBorderColorThe border Color to display when the InputDecorator is disabled.
radiusradius of the border.
widthSideThe width of this line of the border
filledColorbase fill color of the decoration
focusColorfocused fill color of the decoration
OutlineDecorationElement
PropertiesDescription
borderColorThe border Color to display when the InputDecorator does not have the focus.
errorBorderColorThe borwidthLineder Color to display when the InputDecorator does have the error.
focusBorderColorThe border Color to display when the InputDecorator does have the focus.
disabledBorderColorThe border Color to display when the InputDecorator is disabled.
radiusradius of the border.
widthSideThe width of this line of the border
filledColorbase fill color of the decoration
focusColorfocused fill color of the decoration

RoundedDecorationElement

without BorderSide

PropertiesDescription
radiusradius of the border.
filledColorbase fill color of the decoration
focusColorfocused fill color of the decoration

ButtonLoginDecorationElement

decoration for button login

PropertiesDescription
shapeButtonLoginshape of the login button.
backgroundColorButtonackground color of the login button
widthSubmitButtonwidth size of the login button
elevationelevation of the button
  • example
///decoration Element 
 final decoration = OutlineDecorationElement(
                     filledColor: Colors.white,
                     radius: BorderRadius.only(
                       topLeft: Radius.circular(5.0),
                       topRight: Radius.circular(5.0),
                     ),
                     widthSide: 0.6,
                   );

PasswordControls

define an validation rules for password input

PropertiesDescription
minLengthminimum length accepted by password
hasUppercasemake password contains at least one upperCase character
hasSpecialCharactermake password contains at least one special character
hasDigitsmake password contains at least one digits

Libraries

dynamic_form