dynamic_form 0.4.5

Flutter Android iOS web

generate your form with easier way, Pre-existing forms, fields ,customize your form in runtime

dynamicform #

pub GitHub

create your form with easier way

Getting Started #

  • generate form
  • Pre-existing elements

Installing #

Add the following to your pubspec.yaml file:

dependencies:
	dynamic_form: ^0.4.5

Simple Usage #

Creating a basic SimpleDynamicForm:

    SimpleDynamicForm(
              key: dynamicFormKey,
              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

Declare GlobalKey to get validation,list values of forms #

GlobalKey<SimpleDynamicFormState> dynamicFormKey = GlobalKey<SimpleDynamicFormState>();

validate forms #

dynamicFormKey.currentState.validate()

recuperate all values in form : #

dynamicFormKey.currentState.recuperateAllValues()

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

dynamicFormKey.currentState.recuperateByIds()

you recuperate by id

dynamicFormKey.currentState.singleValueById(id)

clear all inputs in form : #

dynamicFormKey.currentState.clearValues()

LoginForm #

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

Simple Usage #

Creating a basic LoginForm :

    LoginForm(
              callback: (email,password){
                    //api call
              },
              buttonLoginDecorationElement: ButtonLoginDecorationElement(
                      backgroundColorButton: Colors.amber,
                      widthSubmitButton: 200,
                      radiusBorderButton: 10,
               ),
              onlyEmail: false,
              labelLogin: "Username",
              password: "Password",
              textButton: Text("Log IN"),
              decorationElement: RoundedDecorationElement(
                filledColor: Colors.grey[300],
              ),
        )

Properties in LoginForm

PropertiesDescription
decorationElementinput decoration of fields of form
directionGroupDirection of form (Vertical/Horizontal)
paddingFieldspadding between fields
onlyEmailenable only email type fieldtext
labelLoginlabel of username/email textField
passwordlabel of the passwordField
callbackcallback to make your api call when you form is validate
textButtonText widget of the submit button
buttonLoginDecorationElementdecoration of button that contain radius,backgroundColor,width
passwordErrormessages errors to show when password field not validate
usernameEmailErrormessages errors to show when email/username not validate

How to skectch 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.
initValueInitiale Value to country 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

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
1
likes
90
pub points
54%
popularity

generate your form with easier way, Pre-existing forms, fields ,customize your form in runtime

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

hamza.mohamedali93@gmail.com

License

MIT (LICENSE)

Dependencies

flag, flutter, http, intl

More

Packages that depend on dynamic_form