Gsform
Flutter form maker
Install / Use
/learn @ritagroup/GsformREADME
<!-- > **Warning**: under cunstruction -->
</br>
</br>
</br>
</br>
<p align="center">
<img src="https://github.com/golrangsystem/gsform/blob/main/screenshot/gsform_logo.png?raw=true" width="300" height="100">
</br>
</p>
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.
<!--* Project status: working --> <img src="https://github.com/golrangsystem/gsform/blob/main/screenshot/header.jpg?raw=true">See real examples:
Table of contents
<!-- Use for instance <https://github.com/ekalinin/github-markdown-toc>: --><!-- > * [Features](#features) -->
<!-- > * [BankCard](#bankcard) -->
<!-- > * [Content](#content) --> <!-- > * [Requirements](#requirements) --> <!-- > * [Limitations](#limitations) --> <!-- > * [Build](#build) --> <!-- > * [Deploy (how to install build product)](#deploy-how-to-install-build-product) --> <!-- > * [Resources (Documentation and other links)](#resources-documentation-and-other-links) --> <!-- > * [Contributing / Reporting issues](#contributing--reporting-issues) -->
Installation
Run this command:
With Flutter: </br>
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.3.6
Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more about it.
Style
<table> <tr> <td>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.
<p align="center"> <img src="https://github.com/golrangsystem/gsform/blob/main/screenshot/darksupport.png?raw=true" alt="alternatetext" height="450"> </br> </p>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
<table> <tr> <td> Row </td> <td> Field </td> <td> Sample Code </td> <td> Preview </td> </tr> <tr style="width:100%;"> <td> 1 </td> <td> <a href="#text">Text</a> </td> <td>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,
)
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,
)
GSField.number(
tag: '',
title: 'title',
weight: 12,
maxLength: 11,
required: true,
errorMessage: 'Error Message',
helpMessage: 'less than 100',
),
GSField.spinner(
errorMessage: 'error message',
hint: 'hint message',
helpMessage: 'help message',
tag: 'tag',
required: true,
weight: 12,
title: 'title',
items: [
SpinnerDataModel(
name: '',
id: 1,),
],
)
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,
)
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,
)
GSField.time(
tag: 'tag',
prefixWidget: widget,
postfixWidget: widget,
errorMessage: 'error message',
hint: 'hint message',
helpMessage: 'help message',
required: true,
initialTime: TimeOfDay,
weight: 12
)
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,
)
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,
)
GSField.password(
tag: 'tag',
errorMessage: 'error message',
hint: 'hint message',
helpMessage: 'help message',
title: 'title',
maxLength: 11,
prefixWidget: widget,
weight: 12,
required: true,
)
GSField.price(
tag: 'tag',
errorMessage: 'error message',
hint: 'hint message',
helpMessage: 'help message',
title: 'title',
maxLength: 11,
prefixWidget: widget,
currencyName: "\$" ,
weight: 12,
required: true,
)
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.
<table> <tr> <td>Attribute</td> <td>Type</td> <td>Values</td> <td>Required</td>