Skip to content

Commit 493cd41

Browse files
deandreamatiasdeandreamatias
authored
Merge pull request #155 from AzazelSensei/docs/visual-examples-21
docs: add a visual example gallery for extra fields #21
2 parents 661db3f + 7d45ed6 commit 493cd41

19 files changed

Lines changed: 1030 additions & 526 deletions

‎README.md‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,18 @@ ___
2727

2828
- Add several type of inputs to `flutter_form_builder`
2929

30+
| Complete form | Color picker | Rating bar | Searchable |
31+
| --- | --- | --- | --- |
32+
| ![Gif demonstration with all extra fields](screenshots/complete_form.gif) | ![Gif demonstration color picker](screenshots/color_picker.gif) | ![Gif demonstration rating bar](screenshots/rating_bar.gif) | ![Gif demonstration searchable dropdown](screenshots/searchable.gif) |
33+
3034
## Inputs
3135

3236
The currently supported fields include:
3337

34-
- `FormBuilderColorPicker` - Input for `Color` selection
35-
- `FormBuilderRating` - For selection of a numerical value as a rating
38+
- `FormBuilderColorPickerField` - Input for `Color` selection
39+
- `FormBuilderRatingBar` - For selection of a numerical value as a rating
3640
- `FormBuilderSearchableDropdown` - Field for selecting value(s) from a searchable list
41+
- `FormBuilderSearchableMultiSelectDropdown` - Searchable list that stores multiple values
3742
- `FormBuilderSignaturePad` - Field with drawing pad on which user can doodle
3843
- `FormBuilderTouchSpin` - Selection of a number by tapping on a plus or minus icon
3944
- `FormBuilderTypeAhead` - Auto-completes user input from a list of items
@@ -59,9 +64,10 @@ Each field has a dependency with your own configurations. Take a look on depende
5964

6065
| Field | Dependency |
6166
|-------|------------|
62-
|`FormBuilderColorPicker`|[flutter_colorpicker](https://pub.dev/packages/flutter_colorpicker)|
63-
|`FormBuilderRating`|[flutter_rating_bar](https://pub.dev/packages/flutter_rating_bar)|
67+
|`FormBuilderColorPickerField`|[flutter_colorpicker](https://pub.dev/packages/flutter_colorpicker)|
68+
|`FormBuilderRatingBar`|[flutter_rating_bar](https://pub.dev/packages/flutter_rating_bar)|
6469
|`FormBuilderSearchableDropdown`|[dropdown_search](https://pub.dev/packages/dropdown_search)|
70+
|`FormBuilderSearchableMultiSelectDropdown`|[dropdown_search](https://pub.dev/packages/dropdown_search)|
6571
|`FormBuilderSignaturePad`|[signature](https://pub.dev/packages/signature)|
6672
|`FormBuilderTouchSpin`|No dependency|
6773
|`FormBuilderTypeAhead`|[flutter_typeahead](https://pub.dev/packages/flutter_typeahead)|
@@ -87,6 +93,24 @@ FormBuilder(
8793

8894
See [pub.dev example tab](https://pub.dev/packages/form_builder_extra_fields/example) or [github code](example/lib/main.dart) for more details
8995

96+
### Examples
97+
98+
The [example app](example/lib/main.dart) is a small gallery. Each screen shows the widget, a couple of use cases, and the live form value.
99+
100+
- Complete form with every extra field
101+
- Color picker types (material, color, block) and a disabled field
102+
- Searchable dropdown, offline vs a delayed online lookup
103+
- Searchable multiselect
104+
- TypeAhead country search, including a required field
105+
- TouchSpin step / min / max
106+
- Rating bar, whole stars and half stars
107+
- Signature pad, with the saved PNG size
108+
109+
```bash
110+
cd example
111+
flutter run
112+
```
113+
90114
For more instructions about `FormBuilder`, see [flutter_form_builder](https://pub.dev/packages/flutter_form_builder) package
91115

92116
## Support

‎example/README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ flutter run
1919

2020
## Features
2121

22-
- Demonstrates how to use various form builder fields.
23-
- Provides examples for customization and usage.
22+
- Home gallery for each extra field
23+
- Complete form plus smaller screens for picker types, search, validation, min/max, and disabled fields
24+
- Live form values so you can see what each widget stores
2425

2526
## Related Resources
2627

‎example/lib/code_page.dart‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import 'package:flutter/material.dart';
2+
3+
class CodePage extends StatelessWidget {
4+
final String title;
5+
final Widget child;
6+
7+
const CodePage({super.key, required this.title, required this.child});
8+
9+
@override
10+
Widget build(BuildContext context) {
11+
return Scaffold(
12+
appBar: AppBar(title: Text(title), elevation: 0),
13+
body: Padding(padding: const EdgeInsets.all(16), child: child),
14+
);
15+
}
16+
}

‎example/lib/data.dart‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
const allCountries = [
2+
'Afghanistan',
3+
'Albania',
4+
'Algeria',
5+
'American Samoa',
6+
'Andorra',
7+
'Angola',
8+
'Anguilla',
9+
'Antarctica',
10+
'Antigua and Barbuda',
11+
'Argentina',
12+
'Armenia',
13+
'Aruba',
14+
'Australia',
15+
'Austria',
16+
'Azerbaijan',
17+
'Bahamas',
18+
'Bahrain',
19+
'Bangladesh',
20+
'Barbados',
21+
'Belarus',
22+
'Belgium',
23+
'Belize',
24+
'Benin',
25+
'Bermuda',
26+
'Bhutan',
27+
'Bolivia',
28+
'Bosnia and Herzegowina',
29+
'Botswana',
30+
'Bouvet Island',
31+
'Brazil',
32+
'British Indian Ocean Territory',
33+
'Brunei Darussalam',
34+
'Bulgaria',
35+
'Burkina Faso',
36+
'Burundi',
37+
'Cambodia',
38+
'Cameroon',
39+
'Canada',
40+
'Cape Verde',
41+
'Cayman Islands',
42+
'Central African Republic',
43+
'Chad',
44+
'Chile',
45+
'China',
46+
'Christmas Island',
47+
'Cocos (Keeling) Islands',
48+
'Colombia',
49+
'Comoros',
50+
'Congo',
51+
'Congo, the Democratic Republic of the',
52+
'Cook Islands',
53+
'Costa Rica',
54+
'Cote d\'Ivoire',
55+
'Croatia (Hrvatska)',
56+
'Cuba',
57+
'Cyprus',
58+
'Czech Republic',
59+
'Denmark',
60+
'Djibouti',
61+
'Dominica',
62+
'Dominican Republic',
63+
'East Timor',
64+
'Ecuador',
65+
'Egypt',
66+
'El Salvador',
67+
'Equatorial Guinea',
68+
'Eritrea',
69+
'Estonia',
70+
'Ethiopia',
71+
'Falkland Islands (Malvinas)',
72+
'Faroe Islands',
73+
'Fiji',
74+
'Finland',
75+
'France',
76+
'France Metropolitan',
77+
'French Guiana',
78+
'French Polynesia',
79+
'French Southern Territories',
80+
'Gabon',
81+
'Gambia',
82+
'Georgia',
83+
'Germany',
84+
'Ghana',
85+
'Gibraltar',
86+
'Greece',
87+
'Greenland',
88+
'Grenada',
89+
'Guadeloupe',
90+
'Guam',
91+
'Guatemala',
92+
'Guinea',
93+
'Guinea-Bissau',
94+
'Guyana',
95+
'Haiti',
96+
'Heard and Mc Donald Islands',
97+
'Holy See (Vatican City State)',
98+
'Honduras',
99+
'Hong Kong',
100+
'Hungary',
101+
'Iceland',
102+
'India',
103+
'Indonesia',
104+
'Iran (Islamic Republic of)',
105+
'Iraq',
106+
'Ireland',
107+
'Israel',
108+
'Italy',
109+
'Jamaica',
110+
'Japan',
111+
'Jordan',
112+
'Kazakhstan',
113+
'Kenya',
114+
'Kiribati',
115+
'Korea, Democratic People\'s Republic of',
116+
'Korea, Republic of',
117+
'Kuwait',
118+
'Kyrgyzstan',
119+
'Lao, People\'s Democratic Republic',
120+
'Latvia',
121+
'Lebanon',
122+
'Lesotho',
123+
'Liberia',
124+
'Libyan Arab Jamahiriya',
125+
'Liechtenstein',
126+
'Lithuania',
127+
'Luxembourg',
128+
'Macau',
129+
'Macedonia, The Former Yugoslav Republic of',
130+
'Madagascar',
131+
'Malawi',
132+
'Malaysia',
133+
'Maldives',
134+
'Mali',
135+
'Malta',
136+
'Marshall Islands',
137+
'Martinique',
138+
'Mauritania',
139+
'Mauritius',
140+
'Mayotte',
141+
'Mexico',
142+
'Micronesia, Federated States of',
143+
'Moldova, Republic of',
144+
'Monaco',
145+
'Mongolia',
146+
'Montserrat',
147+
'Morocco',
148+
'Mozambique',
149+
'Myanmar',
150+
'Namibia',
151+
'Nauru',
152+
'Nepal',
153+
'Netherlands',
154+
'Netherlands Antilles',
155+
'New Caledonia',
156+
'New Zealand',
157+
'Nicaragua',
158+
'Niger',
159+
'Nigeria',
160+
'Niue',
161+
'Norfolk Island',
162+
'Northern Mariana Islands',
163+
'Norway',
164+
'Oman',
165+
'Pakistan',
166+
'Palau',
167+
'Panama',
168+
'Papua New Guinea',
169+
'Paraguay',
170+
'Peru',
171+
'Philippines',
172+
'Pitcairn',
173+
'Poland',
174+
'Portugal',
175+
'Puerto Rico',
176+
'Qatar',
177+
'Reunion',
178+
'Romania',
179+
'Russian Federation',
180+
'Rwanda',
181+
'Saint Kitts and Nevis',
182+
'Saint Lucia',
183+
'Saint Vincent and the Grenadines',
184+
'Samoa',
185+
'San Marino',
186+
'Sao Tome and Principe',
187+
'Saudi Arabia',
188+
'Senegal',
189+
'Seychelles',
190+
'Sierra Leone',
191+
'Singapore',
192+
'Slovakia (Slovak Republic)',
193+
'Slovenia',
194+
'Solomon Islands',
195+
'Somalia',
196+
'South Africa',
197+
'South Georgia and the South Sandwich Islands',
198+
'Spain',
199+
'Sri Lanka',
200+
'St. Helena',
201+
'St. Pierre and Miquelon',
202+
'Sudan',
203+
'Suriname',
204+
'Svalbard and Jan Mayen Islands',
205+
'Swaziland',
206+
'Sweden',
207+
'Switzerland',
208+
'Syrian Arab Republic',
209+
'Taiwan, Province of China',
210+
'Tajikistan',
211+
'Tanzania, United Republic of',
212+
'Thailand',
213+
'Togo',
214+
'Tokelau',
215+
'Tonga',
216+
'Trinidad and Tobago',
217+
'Tunisia',
218+
'Turkey',
219+
'Turkmenistan',
220+
'Turks and Caicos Islands',
221+
'Tuvalu',
222+
'Uganda',
223+
'Ukraine',
224+
'United Arab Emirates',
225+
'United Kingdom',
226+
'United States',
227+
'United States Minor Outlying Islands',
228+
'Uruguay',
229+
'Uzbekistan',
230+
'Vanuatu',
231+
'Venezuela',
232+
'Vietnam',
233+
'Virgin Islands (British)',
234+
'Virgin Islands (U.S.)',
235+
'Wallis and Futuna Islands',
236+
'Western Sahara',
237+
'Yemen',
238+
'Yugoslavia',
239+
'Zambia',
240+
'Zimbabwe',
241+
];

0 commit comments

Comments
 (0)