gsform

Description:

gsform

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
copied to clipboard
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
gsform: ^0.3.6
copied to clipboard
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)'
)

copied to clipboard




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






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






3

Number


GSField.number(
tag: '',
title: 'title',
weight: 12,
maxLength: 11,
required: true,
errorMessage: 'Error Message',
helpMessage: 'less than 100',
),
copied to clipboard






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






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






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






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






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






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






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






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






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






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