Comments (2)
I made a solution for this
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'model/countries.dart';
import 'model/mobile_number_info.dart';
class IntlPhoneField extends StatefulWidget {
final bool obscureText;
final TextAlign textAlign;
final VoidCallback onTap;
/// {@macro flutter.widgets.editableText.readOnly}
final bool readOnly;
final FormFieldSetter<MobileNumberInfo> onSaved;
/// {@macro flutter.widgets.editableText.onChanged}
///
/// See also:
///
/// * [inputFormatters], which are called before [onChanged]
/// runs and can validate and change ("format") the input value.
/// * [onEditingComplete], [onSubmitted], [onSelectionChanged]:
/// which are more specialized input change notifications.
final ValueChanged<MobileNumberInfo> onChanged;
final FormFieldValidator<String> validator;
final bool autoValidate;
/// {@macro flutter.widgets.editableText.keyboardType}
final TextInputType keyboardType;
/// Controls the text being edited.
///
/// If null, this widget will create its own [TextEditingController].
final TextEditingController controller;
/// Defines the keyboard focus for this widget.
///
/// The [focusNode] is a long-lived object that's typically managed by a
/// [StatefulWidget] parent. See [FocusNode] for more information.
///
/// To give the keyboard focus to this widget, provide a [focusNode] and then
/// use the current [FocusScope] to request the focus:
///
/// ```dart
/// FocusScope.of(context).requestFocus(myFocusNode);
/// ```
///
/// This happens automatically when the widget is tapped.
///
/// To be notified when the widget gains or loses the focus, add a listener
/// to the [focusNode]:
///
/// ```dart
/// focusNode.addListener(() { print(myFocusNode.hasFocus); });
/// ```
///
/// If null, this widget will create its own [FocusNode].
///
/// ## Keyboard
///
/// Requesting the focus will typically cause the keyboard to be shown
/// if it's not showing already.
///
/// On Android, the user can hide the keyboard - without changing the focus -
/// with the system back button. They can restore the keyboard's visibility
/// by tapping on a text field. The user might hide the keyboard and
/// switch to a physical keyboard, or they might just need to get it
/// out of the way for a moment, to expose something it's
/// obscuring. In this case requesting the focus again will not
/// cause the focus to change, and will not make the keyboard visible.
///
/// This widget builds an [EditableText] and will ensure that the keyboard is
/// showing when it is tapped by calling [EditableTextState.requestKeyboard()].
final FocusNode focusNode;
/// {@macro flutter.widgets.editableText.onSubmitted}
///
/// See also:
///
/// * [EditableText.onSubmitted] for an example of how to handle moving to
/// the next/previous field when using [TextInputAction.next] and
/// [TextInputAction.previous] for [textInputAction].
final void Function(String) onSubmitted;
/// If false the text field is "disabled": it ignores taps and its
/// [decoration] is rendered in grey.
///
/// If non-null this property overrides the [decoration]'s
/// [Decoration.enabled] property.
final bool enabled;
/// The appearance of the keyboard.
///
/// This setting is only honored on iOS devices.
///
/// If unset, defaults to the brightness of [ThemeData.primaryColorBrightness].
final Brightness keyboardAppearance;
/// Initial Value for the field.
/// This property can be used to pre-fill the field.
final String initialValue;
/// 2 Letter ISO Code
final String initialCountryCode;
/// The decoration to show around the text field.
///
/// By default, draws a horizontal line under the text field but can be
/// configured to show an icon, label, hint text, and error text.
///
/// Specify null to remove the decoration entirely (including the
/// extra padding introduced by the decoration to save space for the labels).
final InputDecoration decoration;
/// The style to use for the text being edited.
///
/// This text style is also used as the base style for the [decoration].
///
/// If null, defaults to the `subtitle1` text style from the current [Theme].
final TextStyle style;
final bool showDropdownIcon;
final BoxDecoration dropdownDecoration;
/// {@macro flutter.widgets.editableText.inputFormatters}
final List<TextInputFormatter> inputFormatters;
/// Placeholder Text to Display in Searchbar for searching countries
final String searchText;
/// Color of the country code
final Color countryCodeTextColor;
/// Color of the drop down arrow
final Color dropDownArrowColor;
IntlPhoneField(
{this.initialCountryCode,
this.obscureText = false,
this.textAlign = TextAlign.left,
this.onTap,
this.readOnly = false,
this.initialValue,
this.keyboardType = TextInputType.number,
this.autoValidate = true,
this.controller,
this.focusNode,
this.decoration,
this.style,
this.onSubmitted,
this.validator,
this.onChanged,
this.onSaved,
this.showDropdownIcon = true,
this.dropdownDecoration = const BoxDecoration(),
this.inputFormatters,
this.enabled = true,
this.keyboardAppearance = Brightness.light,
this.searchText = 'Search by Country Name',
this.countryCodeTextColor,
this.dropDownArrowColor});
@override
_IntlPhoneFieldState createState() => _IntlPhoneFieldState();
}
class _IntlPhoneFieldState extends State<IntlPhoneField> {
Map<String, String> _selectedCountry =
countries.firstWhere((item) => item['code'] == 'US');
List<Map<String, String>> filteredCountries = countries;
FormFieldValidator<String> validator;
// declare mobile obj
String _mobileNumber = '';
@override
void initState() {
super.initState();
if (widget.initialCountryCode != null) {
_selectedCountry = countries
.firstWhere((item) => item['code'] == widget.initialCountryCode);
}
validator = widget.autoValidate
? (value) => value.length != 10 ? 'Invalid Mobile Number' : null
: widget.validator;
}
Future<void> _changeCountry() async {
filteredCountries = countries;
await showDialog(
context: context,
useRootNavigator: false,
child: StatefulBuilder(
builder: (ctx, setState) => Dialog(
child: Container(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
suffixIcon: Icon(Icons.search),
labelText: widget.searchText,
),
onChanged: (value) {
setState(() {
filteredCountries = countries
.where((country) => country['name']
.toLowerCase()
.contains(value.toLowerCase()))
.toList();
print('filteredCountries: $value');
});
},
),
SizedBox(height: 20),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: filteredCountries.length,
itemBuilder: (ctx, index) => Column(
children: <Widget>[
ListTile(
leading: Text(
filteredCountries[index]['flag'],
style: TextStyle(fontSize: 30),
),
title: Text(
filteredCountries[index]['name'],
style: TextStyle(fontWeight: FontWeight.w700),
),
trailing: Text(
filteredCountries[index]['dial_code'],
style: TextStyle(fontWeight: FontWeight.w700),
),
onTap: () {
_selectedCountry = filteredCountries[index];
// call onChanged method here for update country code & phone number
if (widget.onChanged != null) {
widget.onChanged(
MobileNumberInfo(
countryISOCode: _selectedCountry['code'],
countryCode: _selectedCountry['dial_code'],
number: _mobileNumber,
),
);
}
Navigator.of(context).pop();
},
),
Divider(thickness: 1),
],
),
),
),
],
),
),
),
),
);
setState(() {});
}
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
_buildFlagsButton(),
SizedBox(width: 8),
Expanded(
child: TextFormField(
initialValue: widget.initialValue,
readOnly: widget.readOnly,
obscureText: widget.obscureText,
textAlign: widget.textAlign,
textInputAction: TextInputAction.next,
onTap: () {
if (widget.onTap != null) widget.onTap();
},
controller: widget.controller,
focusNode: widget.focusNode,
onFieldSubmitted: (s) {
if (widget.onSubmitted != null) widget.onSubmitted(s);
},
decoration: widget.decoration,
style: widget.style,
onSaved: (value) {
// set mobile number to mobile obj
_mobileNumber = value;
if (widget.onSaved != null)
widget.onSaved(
MobileNumberInfo(
countryISOCode: _selectedCountry['code'],
countryCode: _selectedCountry['dial_code'],
number: value,
),
);
},
onChanged: (value) {
// set mobile number to mobile obj
_mobileNumber = value;
if (widget.onChanged != null)
widget.onChanged(
MobileNumberInfo(
countryISOCode: _selectedCountry['code'],
countryCode: _selectedCountry['dial_code'],
number: value,
),
);
},
validator: validator,
keyboardType: widget.keyboardType,
inputFormatters: widget.inputFormatters,
enabled: widget.enabled,
keyboardAppearance: widget.keyboardAppearance,
),
),
],
);
}
DecoratedBox _buildFlagsButton() {
return DecoratedBox(
decoration: widget.dropdownDecoration,
child: InkWell(
borderRadius: widget.dropdownDecoration.borderRadius,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
if (widget.showDropdownIcon) ...[
Icon(
Icons.arrow_drop_down,
color: widget.dropDownArrowColor,
),
SizedBox(width: 4)
],
Text(
_selectedCountry['flag'],
style: TextStyle(fontSize: 24),
),
SizedBox(width: 8),
FittedBox(
child: Text(
_selectedCountry['dial_code'],
style: TextStyle(
fontWeight: FontWeight.w700,
color: widget.countryCodeTextColor),
),
),
SizedBox(width: 8),
],
),
),
onTap: _changeCountry,
),
);
}
}
from intl_phone_field.
Fixed
from intl_phone_field.
Related Issues (20)
- Feature request: Remove/detect country code from initialValue
- validator not working fine HOT 2
- Correct input length for Ecuador HOT 1
- Null exception when AutoValidateMode is `always` HOT 1
- Custom error display HOT 1
- Exception caught by widgets library
- Consider using libphonenumber_plugin
- Run function on valid phone number HOT 6
- Styling of intl_phone_field HOT 3
- Phone number length not updating HOT 4
- Is there a way to localize the country list?
- Is there a way to change country names according to users locale or something else?
- How to add left padding in country code? HOT 1
- Wrong max length for Italian phone number HOT 1
- Is it support mask like (000) 000 0000 HOT 1
- Change the maximum and minimum size for mobile phone numbers for Chad.
- Limit available countries HOT 1
- phone number lenght
- how to map "dialCode" to country code HOT 1
- Min & Max length - Singapore HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from intl_phone_field.