gsform 0.3.4

GSForm helps to creating forms in Flutter by removing the boilerplate needed to build a form, validate fields, react to changes and collect final user input.

This package helps to create forms in Flutter by removing the boilerplate needed to build a form, validate fields, react to changes and collect final user input.

Also included are common ready-made form input fields for GSForm. This gives you a convenient way of adding common ready-made input fields instead of creating your own FormBuilderField from scratch.

See real examples:

• https://github.com/golrangsystem/gsform/tree/main/example

Table of contents

• Installation
• Theme
  • Style
    • Dark Support
    • Direction
    • Required Show Types

• Fields
• Attributes
  • Text
  • TextPlain
    • Number
    • Spinner
    • DatePicker
    • DateRangedPicker
    • TimePicker
    • Mobile
    • Email
    • Password
    • Price

• License
  • About Golrang System

Installation

Run this command:

With Flutter:

flutter pub add gsform

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  gsform: ^0.1.7

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more about it.

Style

GSFormStyle( backgroundFieldColor: COLOR, backgroundSectionColor: COLOR, sectionCardElevation: 0 titleStyle: TextStyle, fieldHintStyle: TextStyle, fieldTextStyle: TextStyle, sectionRadius: 10.0, errorTextStyle: TextStyle, fieldRadius: double, helpTextStyle:TextStyle , requireType: GSFieldRequireTypeEnum, //text, star sectionCardPadding: 8.0, requiredText: '(required)' )

Dark Support

As we all now Dark theme is trending and most of the popular app has the feature to turn into the dark mode, we support Dark theme in GSForm if you did'nt user custom Style in components, otherwise you should handle this yourself.

Direction

Some languages of the world (Arabic, Hebrew etc.) are RTL, meaning they are read right-to-left, instead of left-to-right. GSForm Support RTL Direction !

Required Show Types

You can set type of required show in form with GSFieldRequireTypeEnum (text Or star)

Fields

Row	Field	Sample Code	Preview
1	Text	GSField.text( tag: 'postalCode', title: 'title', minLine: 1, maxLine: 1, weight: 12, required: true, maxLength: 100, errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', validateRegEx: regX, postfixWidget: widget, prefixWidget: widget, )
2	Text Plain	GSField.textPlain( tag: 'textualAddress', title: 'title', weight: 12, required: true, errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', maxLength: 100, maxLine: 2, minLine: 1, postfixWidget: widget, prefixWidget: widget, )
3	Number	GSField.number( tag: '', title: 'title', weight: 12, maxLength: 11, required: true, errorMessage: 'Error Message', helpMessage: 'less than 100', ),
4	Spinner	GSField.spinner( errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', tag: 'tag', required: true, weight: 12, title: 'title', items: [ SpinnerDataModel( name: '', id: 1,), ], )
5	Date Picker	GSField.datePicker( tag: 'tag', title: 'title', weight: 12, isPastAvailable: false, required: true, postfixWidget: widget, displayDateType: DisplayDateType.numeric, initialDate: Jalali.now(), errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', prefixWidget: widget, )
6	Date Ranged Picker	GSField.dateRangePicker( tag: 'tag', title: 'title', weight: 12, required: true, postfixWidget: widget, displayDateType: DisplayDateType.numeric, isPastAvailable: false, availableFrom: Jalali, availableTo: Jalali, initialDate: Jalali.now(), from: 'From : ', to: 'To : ', errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', prefixWidget: widget, )
7	Time Picker	GSField.time( tag: 'tag', prefixWidget: widget, postfixWidget: widget, errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', required: true, initialTime: TimeOfDay, weight: 12 )
8	Mobile	GSField.mobile( tag: 'tag', errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', title: 'title', maxLength: 11, postfixWidget: widget, prefixWidget: widget, validateRegEx: regex, weight: 12, required: true, )
9	Email	GSField.email( tag: 'tag', errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', title: 'title', maxLength: 11, postfixWidget: widget, prefixWidget: widget, validateRegEx: regex, weight: 12, required: true, )
10	Password	GSField.password( tag: 'tag', errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', title: 'title', maxLength: 11, prefixWidget: widget, weight: 12, required: true, )
11	Price	GSField.price( tag: 'tag', errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', title: 'title', maxLength: 11, prefixWidget: widget, currencyName: "\$" , weight: 12, required: true, )
12	Bank Card	GSField.bankCard( tag: 'tag', postfixWidget: widget, prefixWidget: widget, title: 'title', weight: 12, required: true, errorMessage: 'error message', hint: 'hint message', helpMessage: 'help message', )

Attributes

Some features are common to all fields, which are introduced in the table below. The specific features of each field will be explained in detail below.

Attribute	Type	Values	Required	Description
title	String	-	false	title of component
tag	String	-	true	this is the id of component for receiving data
errorMessage	String	-	false	this is the hint that shown in component
helpMessage	String	-	false	this is the help message that shown in component
prefixWidget	Widget	-	false	this is the prefixWidget and you can pass widget to show
postfixWidget	Widget	-	false	this is the postfixWidget and you can pass widget to show
required	bool	-	false	this boolean show the component status for validation
showTitle	bool	-	false	this boolean is for make title above of component visible or inVisible
status	GSFieldStatusEnum	normal, success, error	false	this boolean is for make title above of component visible or inVisible
validateRegEx	RegExp	-	false	this regx for custom regx that can entered by user
weight	int	-	false	you can set weight for widget and max is 12 in each line

Text

Attribute	Type	Values	Required	Description
maxLenght	int	-	false	maximum lenght of text

TextPlain

Attribute	Type	Values	Required	Description
maxLenght	int	-	false	maximum lenght of text
minLine	int	-	false	minimum line of text
maxLine	int	-	false	maximum line of text
showCounter	bool	-	false	this boolean make counter of textField visible or invisible

Number

Attribute	Type	Values	Required	Description
maxLenght	int	-	false	maximum lenght of text

Spinner

Attribute	Type	Values	Required	Description
items	List[SpinnerDataModel]	-	true	List of data that fill spinner

Mobile

Attribute	Type	Values	Required	Description
maxLenght	int	-	false	maximum lenght of text

Email

Attribute	Type	Values	Required	Description
maxLenght	int	-	false	maximum lenght of text

Password

Attribute	Type	Values	Required	Description
maxLenght	int	-	false	maximum lenght of text

Price

Attribute	Type	Values	Required	Description
maxLenght	int	-	false	maximum lenght of text
currencyName	String	-	false	the Currency text for example $

DatePicker

Attribute	Type	Values	Required	Description
displayDateType	GSCalendarType	jalali, gregoria	true	you can choose type of calendar jalali or gregorian
initialDate	GSDate	year,month,day	false	initialDate of calendar
availableFrom	GSDate	year,month,day	false	available date from
availableTo	GSDate	year,month,day	false	available date to
isPastAvailable	boolean	-	false	this boolean show is past available or not
displayDateType	DisplayDateType	numeric, // 1401/04/04 fullText, // شنبه 04 تیر 1401 mediumText, // شنبه 04 تیر shortText, // 04 تیر ,1401	false	you can pass ENUM type for calendar date type

DateRangedPicker

Attribute	Type	Values	Required	Description
calendarType	GSCalendarType	jalali, gregoria	true	you can choose type of calendar jalali or gregorian
displayDateType	GSDateFormatType	numeric, // 1401/04/04 fullText, // شنبه 04 تیر 1401 mediumText, // شنبه 04 تیر shortText, // 04 تیر ,1401	false	you can choose type of display type
initialDate	GSDate	year,month,day	false	initial date of calendar
availableFrom	GSDate	year,month,day	false	available date from
availableTo	GSDate	year,month,day	false	available date to
isPastAvailable	boolean	-	false	this boolean show is past available or not
from	String	-	false	From text in return selected date
to	String	-	false	To text in return selected date

TimePicker

Attribute	Type	Values	Required	Description
initialTime	TimeOfDay	-	false	initial time of calendar

About Rita Group

Golrang System Company is an active company in the field of information and communication technology, which aims to provide information technology solutions to help productivity and improve the capability and profitability of Golrang Industrial Group as the arm of the senior management since the beginning of the group's establishment. The passage of time has reached growth.

Considering the expansion of the use of information technology in the field of industry and the trend of companies towards globalization, this company has put the provision of advanced information and communication technology solutions on its agenda, and it tries to be an integrated task by focusing on the field of information and communication technology. Be responsible for creating systems, project management and technical and consulting services.

Contributors

License

Apache License, Version 2.0