liodali / DynamicFormFlutter

Flutter widget to build forms with easier way

dynamicform

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.23.0

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

Properties	Description
groupElements	list of element to build your form
padding	The amount of space by which to inset the form
controller	The 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);

set input value in form :

you can change field value using id of that field

 controller.setFieldValueById(id,value);

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,
          textButton: Text("Log IN"),
          paddingFields: const EdgeInsets.all(0),
          decorationLoginForm: DecorationLoginForm(
            commonDecoration: decoration,
            decorationEmailElement: OutlineDecorationElement(
                contentPadding: EdgeInsets.only(
                left: 12.0,
              ),
            ),
            decorationPasswordElement: OutlinePasswordElementDecoration(
                contentPadding: EdgeInsets.only(left: 8),
                prefix: Padding(
                   padding: EdgeInsets.all(6.0),
                   child: Icon(
                      Icons.lock,
                      size: 20,
                  ),
            ),
            enableVisibilityPassword: false
      ),
    )

LoginFormController

• validate login form
• recuperate email/password
• show error in specific input

1. initialization

LoginFormController controller = LoginFormController();

2. recuperate email/Username,password

final email = controller.email;
final password = controller.password;

3. access to controller in submit button

 LoginFormController controller = LoginForm.of(context)

4. show field error after validation (use case when auth failed)

 controller.addEmailError("invalid Email not found");
 controller.addPasswordError("invalid Email not found");

5. Properties

Properties	Description
controller	LoginFormController to validate login form and get data
decorationLoginForm	(DecorationLoginForm) contain configuration of the inputs decoration of email/password fields in form
directionGroup	Direction of form (Vertical/Horizontal)
paddingFields	padding between fields
onlyEmail	enable only email type textField
passwordError	messages errors to show when password field not validate
usernameEmailError	messages 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();

2. validation payment form

bool isValid = controller.validate();

3. recuperate cardNumber,cvv,dateExpiration

final cardNumber = controller.cardNumber;
final cvv = controller.cvv;
final dateExpiration = controller.dateExpiration;

5. access to payment controller inside payment submit button

 PaymentController controller = PaymentForm.of(context);

6. show field error after validation (use case when card check failed)

 controller.addCardNumberError(errorMessage);
 controller.addCVVError(errorMessage);
 controller.addDateExpirationError(errorMessage);

7. `Properties

Properties	Description
controller	(PaymentController) controller to validate form,setError fields,clear values
entryModeDateExpiration	(DateExpirationEntryMode) input type of card date expiration can be dropdown or input(textField)
decorationElement	decoration of all input field in form
buttonDecoration	decoration of button that contain radius,backgroundColor,width
errorMessageDateExpiration	messages errors to show when Date Expiration field not validate
errorMessageCVV	messages errors to show when cvv field is invalidate
errorMessageCardNumber	messages errors to show when credit card number is invalidate
errorIsRequiredMessage	messages errors to show when at least one field not filled
labelCardNumber	text label of credit card number field
labelDateExpiration	text label of date expiration field
labelCVV	text 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

Properties	Description
directionGroup	Direction of form (Vertical/Horizontal)
sizeElements	size of each textElement of form When direction Horizontal,sum of values should be egal a 1
textElements	group of textElement.
padding	padding of groups.
decoration	decoration of container groups.
backgroundColor	color of the container groups.

textElement

Properties	Description
typeInput	Enumerate to specifie type of TextField.
label	text label of TextField.
DecorationElement	input decoration of TextField.
onTap	callback when you click on TextField .
hint	text hint of textField.
errorMsg	message to show when TextField isn't validate.
labelStyle	style of label TextField
errorStyle	style of error message TextField
hintStyle	style of hint TextFieldcolor
readOnly	enable TextField uneditable
validator	callback validation of TextField
padding	padding of TextField
visibility	enable visibility of element

EmailElement

Pre-exsiting element

check validation of email

Pre-initialized values

extends from TextElement

Properties	Description
DecorationElement	input decoration of TextField.
label	text label of TextField.
hint	text hint of textField.
isRequired	make textField required in validation
errorEmailIsRequired	error message for textField when it's required
errorEmailPattern	error message for textField input when it's not email in validation
labelStyle	style of label TextField
errorStyle	style of error message TextField
hintStyle	style of hint TextFieldcolor
readOnly	enable TextField uneditable
padding	padding of TextField

PasswordElement

Pre-exsiting element

check validation of password

Pre-initialized values

show/hide password

extends from TextElement

Properties	Description
DecorationElement	input decoration of TextField.
label	text label of TextField.
hint	text hint of textField.
errorMsg	message to show when TextField isn't validate.
labelStyle	style of label TextField
errorStyle	style of error message TextField
hintStyle	style of hint TextFieldcolor
readOnly	enable TextField uneditable
padding	padding of TextField
enableShowPassword	enable eye icon,make password text visible
isRequired	make passwordField required
minLength	minimun length accepted by password
hasUppercase	make password contains at least one upperCase character
hasSpecialCharacter	make password contains at least one special character
hasDigits	make password contains at least one digits
requiredErrorMsg	message error to show when password is required
minLengthErrorMsg	message error to show when password length is less then the specified
uppercaseErrorMsg	message error to show when password doesn't contain any upperCase character
specialCharacterErrorMsg	message 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

Properties	Description
label	text label of TextField.
hint	text hint of textField.
DecorationElement	input decoration of TextField.
errorMsg	message to show when TextField isn't validate.
labelStyle	style of label TextField
errorStyle	style of error message TextField
hintStyle	style of hint TextFieldcolor
readOnly	enable TextField uneditable
padding	padding of TextField
isDigits	enable only digit number

CountryElement

Pre-exsiting element for Country input

Pre-initialized values

pick country via BottomSheet

show flag of countries

Properties	Description
DecorationElement	input decoration of TextField.
label	text label of TextField.
initValue	Initiale Value to country input.
labelModalSheet	Title of modalSheet
labelSearchModalSheet	hint search textfield in BottomSheet
countryTextResult	enumeration get result of selection countries
showFlag	show flag of countris in modalsheet
padding	padding of TextField
readonly	when 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

Properties	Description
DecorationElement	input decoration of TextField.
label	text label of TextField.
hint	text placeholder for phone number input.
initValue	initial Value to phone input.
errorMsg	text error message
validator	callback validation of TextField
showPrefixFlag	enable flag country to be visible at left of TextField
showSuffixFlag	enable flag country to be visible at rigth of TextField
padding	padding of TextField
showPrefix	show calling phone number(get current calling phone of user)
readOnly	bool 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

Properties	Description
maxLines	maximum line to span in textField.
showCounter	enable visibility of counterText.
maxCharacter	The limit on the number of characters that you can type in textField

DateElement

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

Properties	Description
id	String,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
decorationElement	input 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

RadioGroupElement

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

Properties	Description
id	String,should be unique,
initValue	(String) initialized select value of the radio group field
label	(String) text label of the radio group field
labelAlignment	(AlignmentGeometry) label text alignment
activeSelectedColor	(Color) active select radio in the radio group field
decorationElement	input decoration of TextField
errorMsg	(String) error message that will show when error
values	(List) list of values of each selected item
valuesLabel	(List) list of labels of each item in the radio group
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

Properties	Description
borderColor	The border Color to display when the InputDecorator does not have the focus.
errorBorderColor	The borwidthLineder Color to display when the InputDecorator does have the error.
focusBorderColor	The border Color to display when the InputDecorator does have the focus.
disabledBorderColor	The border Color to display when the InputDecorator is disabled.
radius	radius of the border.
widthSide	The width of this line of the border
filledColor	base fill color of the decoration
focusColor	focused fill color of the decoration

OutlineDecorationElement

Properties	Description
borderColor	The border Color to display when the InputDecorator does not have the focus.
errorBorderColor	The borwidthLineder Color to display when the InputDecorator does have the error.
focusBorderColor	The border Color to display when the InputDecorator does have the focus.
disabledBorderColor	The border Color to display when the InputDecorator is disabled.
radius	radius of the border.
widthSide	The width of this line of the border
filledColor	base fill color of the decoration
focusColor	focused fill color of the decoration

RoundedDecorationElement

without BorderSide

Properties	Description
radius	radius of the border.
filledColor	base fill color of the decoration
focusColor	focused fill color of the decoration

ButtonLoginDecorationElement

decoration for button login

Properties	Description
shapeButtonLogin	shape of the login button.
backgroundColorButton	ackground color of the login button
widthSubmitButton	width size of the login button
elevation	elevation 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

Properties	Description
minLength	minimum length accepted by password
hasUppercase	make password contains at least one upperCase character
hasSpecialCharacter	make password contains at least one special character
hasDigits	make password contains at least one digits