Skip to content

Commit 58d7545

Browse files
furkankurtfurkankurt
authored
Added FormBuilderCountryPicker and FormBuilderPhoneField. (#270)
1 parent 72af06c commit 58d7545

File tree

5 files changed

+550
-83
lines changed

5 files changed

+550
-83
lines changed

‎example/lib/main.dart

Lines changed: 62 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@ class MyHomePageState extends State<MyHomePage> {
4141
bool readOnly = false;
4242
bool showSegmentedControl = true;
4343
final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();
44-
final GlobalKey<FormFieldState> _specifyTextFieldKey =
45-
GlobalKey<FormFieldState>();
44+
final GlobalKey<FormFieldState> _specifyTextFieldKey = GlobalKey<FormFieldState>();
4645

4746
ValueChanged _onChanged = (val) => print(val);
4847
var genderOptions = ['Male', 'Female', 'Other'];
@@ -74,16 +73,11 @@ class MyHomePageState extends State<MyHomePage> {
7473
labelText: 'Select many options',
7574
),
7675
options: [
77-
FormBuilderFieldOption(
78-
value: 'Test', child: Text('Test')),
79-
FormBuilderFieldOption(
80-
value: 'Test 1', child: Text('Test 1')),
81-
FormBuilderFieldOption(
82-
value: 'Test 2', child: Text('Test 2')),
83-
FormBuilderFieldOption(
84-
value: 'Test 3', child: Text('Test 3')),
85-
FormBuilderFieldOption(
86-
value: 'Test 4', child: Text('Test 4')),
76+
FormBuilderFieldOption(value: 'Test', child: Text('Test')),
77+
FormBuilderFieldOption(value: 'Test 1', child: Text('Test 1')),
78+
FormBuilderFieldOption(value: 'Test 2', child: Text('Test 2')),
79+
FormBuilderFieldOption(value: 'Test 3', child: Text('Test 3')),
80+
FormBuilderFieldOption(value: 'Test 4', child: Text('Test 4')),
8781
],
8882
),
8983
FormBuilderChoiceChip(
@@ -92,16 +86,11 @@ class MyHomePageState extends State<MyHomePage> {
9286
labelText: 'Select an option',
9387
),
9488
options: [
95-
FormBuilderFieldOption(
96-
value: 'Test', child: Text('Test')),
97-
FormBuilderFieldOption(
98-
value: 'Test 1', child: Text('Test 1')),
99-
FormBuilderFieldOption(
100-
value: 'Test 2', child: Text('Test 2')),
101-
FormBuilderFieldOption(
102-
value: 'Test 3', child: Text('Test 3')),
103-
FormBuilderFieldOption(
104-
value: 'Test 4', child: Text('Test 4')),
89+
FormBuilderFieldOption(value: 'Test', child: Text('Test')),
90+
FormBuilderFieldOption(value: 'Test 1', child: Text('Test 1')),
91+
FormBuilderFieldOption(value: 'Test 2', child: Text('Test 2')),
92+
FormBuilderFieldOption(value: 'Test 3', child: Text('Test 3')),
93+
FormBuilderFieldOption(value: 'Test 4', child: Text('Test 4')),
10594
],
10695
),
10796
FormBuilderCustomField(
@@ -116,17 +105,15 @@ class MyHomePageState extends State<MyHomePage> {
116105
return InputDecorator(
117106
decoration: InputDecoration(
118107
labelText: "Select option",
119-
contentPadding:
120-
EdgeInsets.only(top: 10.0, bottom: 0.0),
108+
contentPadding: EdgeInsets.only(top: 10.0, bottom: 0.0),
121109
border: InputBorder.none,
122110
errorText: field.errorText,
123111
),
124112
child: Container(
125113
height: 200,
126114
child: CupertinoPicker(
127115
itemExtent: 30,
128-
children:
129-
allCountries.map((c) => Text(c)).toList(),
116+
children: allCountries.map((c) => Text(c)).toList(),
130117
onSelectedItemChanged: (index) {
131118
print(index);
132119
field.didChange(allCountries[index]);
@@ -156,19 +143,13 @@ class MyHomePageState extends State<MyHomePage> {
156143
if (query.length != 0) {
157144
var lowercaseQuery = query.toLowerCase();
158145
return contacts.where((profile) {
159-
return profile.name
160-
.toLowerCase()
161-
.contains(query.toLowerCase()) ||
162-
profile.email
163-
.toLowerCase()
164-
.contains(query.toLowerCase());
146+
return profile.name.toLowerCase().contains(query.toLowerCase()) ||
147+
profile.email.toLowerCase().contains(query.toLowerCase());
165148
}).toList(growable: false)
166149
..sort((a, b) => a.name
167150
.toLowerCase()
168151
.indexOf(lowercaseQuery)
169-
.compareTo(b.name
170-
.toLowerCase()
171-
.indexOf(lowercaseQuery)));
152+
.compareTo(b.name.toLowerCase().indexOf(lowercaseQuery)));
172153
} else {
173154
return const <Contact>[];
174155
}
@@ -181,8 +162,7 @@ class MyHomePageState extends State<MyHomePage> {
181162
backgroundImage: NetworkImage(profile.imageUrl),
182163
),
183164
onDeleted: () => state.deleteChip(profile),
184-
materialTapTargetSize:
185-
MaterialTapTargetSize.shrinkWrap,
165+
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
186166
);
187167
},
188168
suggestionBuilder: (context, state, profile) {
@@ -274,8 +254,7 @@ class MyHomePageState extends State<MyHomePage> {
274254
),
275255
validators: [
276256
FormBuilderValidators.requiredTrue(
277-
errorText:
278-
"You must accept terms and conditions to continue",
257+
errorText: "You must accept terms and conditions to continue",
279258
),
280259
],
281260
),
@@ -332,15 +311,12 @@ class MyHomePageState extends State<MyHomePage> {
332311
if (query.length != 0) {
333312
var lowercaseQuery = query.toLowerCase();
334313
return allCountries.where((country) {
335-
return country
336-
.toLowerCase()
337-
.contains(lowercaseQuery);
314+
return country.toLowerCase().contains(lowercaseQuery);
338315
}).toList(growable: false)
339316
..sort((a, b) => a
340317
.toLowerCase()
341318
.indexOf(lowercaseQuery)
342-
.compareTo(
343-
b.toLowerCase().indexOf(lowercaseQuery)));
319+
.compareTo(b.toLowerCase().indexOf(lowercaseQuery)));
344320
} else {
345321
return allCountries;
346322
}
@@ -364,35 +340,29 @@ class MyHomePageState extends State<MyHomePage> {
364340
if (query.length != 0) {
365341
var lowercaseQuery = query.toLowerCase();
366342
return contacts.where((contact) {
367-
return contact.name
368-
.toLowerCase()
369-
.contains(lowercaseQuery);
343+
return contact.name.toLowerCase().contains(lowercaseQuery);
370344
}).toList(growable: false)
371345
..sort((a, b) => a.name
372346
.toLowerCase()
373347
.indexOf(lowercaseQuery)
374-
.compareTo(b.name
375-
.toLowerCase()
376-
.indexOf(lowercaseQuery)));
348+
.compareTo(b.name.toLowerCase().indexOf(lowercaseQuery)));
377349
} else {
378350
return contacts;
379351
}
380352
},
381353
),
382354
FormBuilderRadio(
383-
decoration:
384-
InputDecoration(labelText: 'My chosen language'),
355+
decoration: InputDecoration(labelText: 'My chosen language'),
385356
attribute: "best_language",
386357
leadingInput: true,
387358
onChanged: _onChanged,
388359
validators: [FormBuilderValidators.required()],
389-
options:
390-
["Dart", "Kotlin", "Java", "Swift", "Objective-C"]
391-
.map((lang) => FormBuilderFieldOption(
392-
value: lang,
393-
child: Text('$lang'),
394-
))
395-
.toList(growable: false),
360+
options: ["Dart", "Kotlin", "Java", "Swift", "Objective-C"]
361+
.map((lang) => FormBuilderFieldOption(
362+
value: lang,
363+
child: Text('$lang'),
364+
))
365+
.toList(growable: false),
396366
),
397367
FormBuilderRadio(
398368
decoration: InputDecoration(labelText: 'Pick a number'),
@@ -413,8 +383,7 @@ class MyHomePageState extends State<MyHomePage> {
413383
],
414384
),
415385
FormBuilderSegmentedControl(
416-
decoration:
417-
InputDecoration(labelText: "Movie Rating (Archer)"),
386+
decoration: InputDecoration(labelText: "Movie Rating (Archer)"),
418387
attribute: "movie_rating",
419388
textStyle: TextStyle(fontWeight: FontWeight.bold),
420389
options: List.generate(5, (i) => i + 1)
@@ -456,8 +425,7 @@ class MyHomePageState extends State<MyHomePage> {
456425
isHalfAllowed: true,
457426
),
458427
FormBuilderCheckboxList(
459-
decoration: InputDecoration(
460-
labelText: "The language of my people"),
428+
decoration: InputDecoration(labelText: "The language of my people"),
461429
attribute: "languages",
462430
initialValue: ["Dart"],
463431
leadingInput: true,
@@ -473,21 +441,14 @@ class MyHomePageState extends State<MyHomePage> {
473441
FormBuilderCustomField(
474442
attribute: 'custom',
475443
valueTransformer: (val) {
476-
if (val == "Other")
477-
return _specifyTextFieldKey.currentState.value;
444+
if (val == "Other") return _specifyTextFieldKey.currentState.value;
478445
return val;
479446
},
480447
formField: FormField(
481448
builder: (FormFieldState<String> field) {
482-
var languages = [
483-
"English",
484-
"Spanish",
485-
"Somali",
486-
"Other"
487-
];
449+
var languages = ["English", "Spanish", "Somali", "Other"];
488450
return InputDecorator(
489-
decoration: InputDecoration(
490-
labelText: "What's your preferred language?"),
451+
decoration: InputDecoration(labelText: "What's your preferred language?"),
491452
child: Column(
492453
children: languages
493454
.map(
@@ -511,8 +472,7 @@ class MyHomePageState extends State<MyHomePage> {
511472
SizedBox(width: 20),
512473
Expanded(
513474
child: TextFormField(
514-
key:
515-
_specifyTextFieldKey,
475+
key: _specifyTextFieldKey,
516476
),
517477
),
518478
],
@@ -539,6 +499,33 @@ class MyHomePageState extends State<MyHomePage> {
539499
}
540500
],
541501
),
502+
FormBuilderCountryPicker(
503+
defaultSelectedCountryIsoCode: 'US',
504+
attribute: "country",
505+
cursorColor: Colors.black,
506+
style: TextStyle(color: Colors.black, fontSize: 18),
507+
priorityListByIsoCode: ['US'],
508+
valueTransformer: (value) {
509+
return value.isoCode;
510+
},
511+
decoration: InputDecoration(border: OutlineInputBorder(), labelText: "Country"),
512+
validators: [
513+
FormBuilderValidators.required(errorText: 'This field required.'),
514+
],
515+
),
516+
FormBuilderPhoneField(
517+
attribute: 'phone_number',
518+
keyboardType: TextInputType.phone,
519+
defaultSelectedCountryIsoCode: 'US',
520+
cursorColor: Colors.black,
521+
style: TextStyle(color: Colors.black, fontSize: 18),
522+
decoration: InputDecoration(border: OutlineInputBorder(), labelText: "Phone Number"),
523+
priorityListByIsoCode: ['US'],
524+
validators: [
525+
FormBuilderValidators.numeric(errorText: 'Invalid phone number'),
526+
FormBuilderValidators.required(errorText: 'This field reqired')
527+
],
528+
),
542529
FormBuilderSignaturePad(
543530
decoration: InputDecoration(labelText: "Signature"),
544531
attribute: "signature",

‎lib/flutter_form_builder.dart

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
library flutter_form_builder;
22

3-
export './src/form_builder.dart';
4-
export './src/form_builder_custom_field.dart';
5-
export './src/form_builder_field_option.dart';
6-
export './src/form_builder_validators.dart';
3+
export 'package:flutter_typeahead/flutter_typeahead.dart';
4+
75
export './src/fields/form_builder_checkbox.dart';
86
export './src/fields/form_builder_checkbox_list.dart';
97
export './src/fields/form_builder_chips_choice.dart';
@@ -13,17 +11,21 @@ export './src/fields/form_builder_color_picker.dart';
1311
export './src/fields/form_builder_date_range_picker.dart';
1412
export './src/fields/form_builder_date_time_picker.dart';
1513
export './src/fields/form_builder_dropdown.dart';
14+
export './src/fields/form_builder_image_picker.dart';
15+
export './src/fields/form_builder_image_picker.dart';
16+
export './src/fields/form_builder_phone_field.dart';
1617
export './src/fields/form_builder_radio.dart';
1718
export './src/fields/form_builder_range_slider.dart';
1819
export './src/fields/form_builder_rate.dart';
1920
export './src/fields/form_builder_segmented_control.dart';
21+
export './src/fields/form_builder_signature_pad.dart';
2022
export './src/fields/form_builder_slider.dart';
2123
export './src/fields/form_builder_stepper.dart';
2224
export './src/fields/form_builder_switch.dart';
2325
export './src/fields/form_builder_text_field.dart';
2426
export './src/fields/form_builder_touch_spin.dart';
2527
export './src/fields/form_builder_typeahead.dart';
26-
export './src/fields/form_builder_signature_pad.dart';
27-
export './src/fields/form_builder_image_picker.dart';
28-
29-
export 'package:flutter_typeahead/flutter_typeahead.dart';
28+
export './src/form_builder.dart';
29+
export './src/form_builder_custom_field.dart';
30+
export './src/form_builder_field_option.dart';
31+
export './src/form_builder_validators.dart';

0 commit comments

Comments
 (0)