dynamic_form

Description:

dynamic form

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
copied to clipboard
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,
)
],
)
],
);
copied to clipboard
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();
copied to clipboard

you can access to controller from your submit button

FormController controller = SimpleDynamicForm.of(context);
copied to clipboard
validate forms #
controller.validate();
copied to clipboard
show error to forms fields after validation #

error will be cleared automatically when form validate

controller.addErrorToField(String idField,String errorMessage);
copied to clipboard
recuperate all values in form : #
controller.getAllValues();
copied to clipboard

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

Map values = controller.getByIds();
copied to clipboard

you recuperate by id

controller.getValueById(id);
copied to clipboard
set input value in form : #

you can change field value using id of that field

controller.setFieldValueById(id,value);
copied to clipboard
clear all inputs in form : #
controller.clearValues();
copied to clipboard
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
),
)
copied to clipboard
LoginFormController #

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


initialization

LoginFormController controller = LoginFormController();
copied to clipboard

recuperate email/Username,password

final email = controller.email;
final password = controller.password;
copied to clipboard

access to controller in submit button

LoginFormController controller = LoginForm.of(context)
copied to clipboard

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

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

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


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"),
),
)
copied to clipboard
PaymentController #

initialization

PaymentController controller = PaymentController();
copied to clipboard

validation payment form

bool isValid = controller.validate();
copied to clipboard

recuperate cardNumber,cvv,dateExpiration

final cardNumber = controller.cardNumber;
final cvv = controller.cvv;
final dateExpiration = controller.dateExpiration;
copied to clipboard

access to payment controller inside payment submit button

PaymentController controller = PaymentForm.of(context);
copied to clipboard

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

controller.addCardNumberError(errorMessage);
controller.addCVVError(errorMessage);
controller.addDateExpirationError(errorMessage);
copied to clipboard

`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


valuesLabel
(List


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,
);
copied to clipboard
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