GitLocker: The Coding Marketplace

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