Skip to content

Commit 1ac3a97

Browse files
7wilightxdev7wilightxdev
committed
publish
1 parent 48c0fc9 commit 1ac3a97

File tree

6 files changed

+124
-74
lines changed

6 files changed

+124
-74
lines changed

‎CHANGELOG.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
## 0.0.1
22

3-
* TODO: Describe initial release.
3+
* TODO: initial release.

‎LICENSE

+21-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,21 @@
1-
TODO: Add your license here.
1+
MIT License
2+
3+
Copyright (c) 2022 TechFusion Ltd
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+92-61
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,118 @@
1-
# tf_form
2-
3-
### TechFusion's form builder and validator
1+
# TFForm
42

5-
Copyright (c) 2022 TechFusion Ltd (https://www.techfusion.dev)
6-
7-
## Usage
8-
### Create a `TFForm` with a GlobalKey
9-
First, create a `TFForm`. The `TFForm` widget acts as a container for grouping and validating multiple form fields.
3+
A Flutter package for creating a form container to group multiple common form widgets together and validate them automatically.
104

11-
When creating the form, provide a `GlobalKey`. This uniquely identifies the `TFForm`, and allows validation of the form in a later step.
5+
Copyright (c) 2022 TechFusion Ltd (<https://www.techfusion.dev>)
6+
7+
## Installing
8+
9+
In the `pubspec.yaml` of your flutter project, add the following dependency:
10+
11+
```yaml
12+
dependencies:
13+
...
14+
tf_form: ^0.0.1
15+
```
16+
17+
In your library add the following import:
18+
19+
```dart
20+
import 'package:tf_form/tf_form.dart';
21+
```
22+
23+
## Widgets
24+
25+
### TFForm
26+
27+
The `TFForm` widget acts as a container for grouping and validating multiple form widgets provided by package. It requires a `GlobalKey` to allow validation of the form in a later step. Also, you can configure error messages or style the form by passing arguments to the constructor.
1228

1329
```dart
1430
final _formKey = GlobalKey<TFFormState>();
1531
1632
@override
1733
Widget build(BuildContext context) {
18-
// Build a Form widget using the _formKey created above.
34+
// Build a TFForm widget using the _formKey created above.
1935
return TFForm(
2036
key: _formKey,
2137
child: Column(
2238
children: <Widget>[
23-
// Add TFTextField and ElevatedButton here.
39+
// Add form widgets and ElevatedButton here.
2440
],
2541
),
2642
);
2743
}
2844
```
29-
30-
### Add a `TFTextField` with validation types and controller
31-
`TFTextField` maintains the current state of the form field, so that updates
32-
and validation errors are visually reflected in the UI.
3345

34-
A `TFForm` ancestor is required. The `TFForm` simply makes it easier to
35-
validate multiple fields at once.
46+
### TFTextField
3647

37-
```dart
48+
A text field is the most popular form widget. It lets the user enter text, either with hardware keyboard or with an onscreen keyboard.
49+
50+
```dart
3851
TFTextField(
39-
label: "Nickname",
52+
title: "Nickname",
53+
hintText: "Enter a nickname",
4054
controller: nicknameController,
41-
types: const [
42-
TFTextFieldType.required,
43-
],
44-
),
45-
TFTextField(
46-
label: "Email",
47-
controller: emailController,
48-
types: const [
49-
TFTextFieldType.required,
50-
TFTextFieldType.emailAddress,
55+
validationTypes: const [
56+
TFValidationType.required,
5157
],
5258
),
53-
TFTextField(
54-
label: "Phone",
55-
controller: phoneController,
56-
types: const [
57-
TFTextFieldType.required,
58-
TFTextFieldType.phone,
59+
```
60+
61+
### TFDropdownField
62+
63+
A dropdown field allows the user to pick a value from a dropdown list
64+
65+
```dart
66+
TFDropdownField(
67+
title: "Role",
68+
items: const [
69+
"Member",
70+
"Seller",
71+
"Admin",
5972
],
73+
selectedItem: "Member",
74+
controller: roleController,
75+
isRequired: true,
6076
),
61-
TFDateField(
77+
```
78+
79+
### TFDateField
80+
81+
A date field allows the user to pick a DateTime.=
82+
83+
```dart
84+
TFDateField(
6285
title: "Birthday",
63-
controller: birthdayController,
6486
initialDate: DateTime.now(),
6587
firstDate: DateTime.now().subtract(const Duration(days: 365)),
6688
lastDate: DateTime.now().add(const Duration(days: 365)),
89+
controller: birthdayController,
6790
isRequired: true,
6891
),
69-
TFDropdownField(
70-
title: "City",
71-
items: const [
72-
"A",
73-
"B",
74-
"C",
75-
"D",
92+
```
93+
94+
### TFRadioGroup
95+
96+
A radio group allows user to select one option from multiple selections
97+
98+
```dart
99+
TFRadioGroup<String>(
100+
title: "Gender",
101+
items: [
102+
TFRadioItem<String>(title: "Male", value: "male"),
103+
TFRadioItem<String>(title: "Female", value: "female"),
104+
TFRadioItem<String>(title: "Other", value: "other"),
76105
],
77-
controller: cityController,
78-
selectedItem: "",
79-
isRequired: true,
106+
onChanged: (selectedItem) {},
80107
),
81-
TFCheckboxGroup(
108+
```
109+
110+
### TFCheckboxGroup
111+
112+
A checkbox group allows user to select multiple items
113+
114+
```dart
115+
TFCheckboxGroup(
82116
title: "Which social network do you usually use ?",
83117
items: [
84118
TFCheckboxItem(title: "Facebook"),
@@ -89,18 +123,15 @@ validate multiple fields at once.
89123
],
90124
onChanged: (checkedItemIndexes) {},
91125
),
92-
TFRadioGroup<String>(
93-
title: "Gender",
94-
items: [
95-
TFRadioItem<String>(title: "Male", value: "male"),
96-
TFRadioItem<String>(title: "Female", value: "female"),
97-
TFRadioItem<String>(title: "Other", value: "other"),
98-
],
99-
onChanged: (selectedItem) {},
100-
),
101-
```
102-
103-
### Create a button to validate and submit the form
126+
```
127+
128+
## Basic Usage
129+
130+
- First, create a `TFForm`
131+
132+
- Add one of the above five types as children of `TFForm`. The `TFForm` simply makes it easier to validate all at once.
133+
134+
- Finally, create a button to validate the form.
104135

105136
```dart
106137
ElevatedButton(
@@ -110,4 +141,4 @@ validate multiple fields at once.
110141
child: const Text('Submit'),
111142
),
112143
113-
```
144+
```

‎example/lib/main.dart

+7-9
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ class DemoFormPageState extends State<DemoFormPage> {
3434
final emailController = TextEditingController();
3535
final birthdayController = TextEditingController();
3636
final phoneController = TextEditingController();
37-
final cityController = TextEditingController();
37+
final roleController = TextEditingController();
3838

3939
final _addressesFormKey = GlobalKey<TFFormState>();
4040
final address1Controller = TextEditingController();
@@ -76,7 +76,6 @@ class DemoFormPageState extends State<DemoFormPage> {
7676
return SingleChildScrollView(
7777
child: TFForm(
7878
key: _personalFormKey,
79-
style: TFFormStyle(activeColor: Colors.green),
8079
child: Padding(
8180
padding: const EdgeInsets.all(16.0),
8281
child: Column(
@@ -111,15 +110,14 @@ class DemoFormPageState extends State<DemoFormPage> {
111110
),
112111
const SizedBox(height: 15),
113112
TFDropdownField(
114-
title: "City",
113+
title: "Role",
115114
items: const [
116-
"A",
117-
"B",
118-
"C",
119-
"D",
115+
"Member",
116+
"Seller",
117+
"Admin",
120118
],
121-
controller: cityController,
122-
selectedItem: "",
119+
controller: roleController,
120+
selectedItem: "Member",
123121
isRequired: true,
124122
),
125123
const SizedBox(height: 15),

‎example/pubspec.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ environment:
2929
dependencies:
3030
flutter:
3131
sdk: flutter
32-
tf_form:
32+
tf_form:
3333
path: ../
3434

3535

‎lib/src/tf_form.dart

+2-1
Original file line numberDiff line numberDiff line change
@@ -1035,6 +1035,7 @@ class _TFDropdownFieldState extends State<TFDropdownField> {
10351035
OverlayEntry _buildDropListOverlay() {
10361036
final renderBox = context.findRenderObject() as RenderBox;
10371037
final size = renderBox.size;
1038+
final activeColor = TFFormStyle.of(context).activeColor;
10381039
return OverlayEntry(
10391040
builder: (context) => Positioned(
10401041
width: size.width,
@@ -1053,7 +1054,7 @@ class _TFDropdownFieldState extends State<TFDropdownField> {
10531054
title: Text(item),
10541055
selected: isSelected,
10551056
selectedColor: Colors.white,
1056-
selectedTileColor: TFFormStyle.of(context).activeColor,
1057+
selectedTileColor: activeColor,
10571058
trailing: isSelected
10581059
? const Icon(
10591060
Icons.check,

0 commit comments

Comments
 (0)