Skip to content

Commit 4b23365

Browse files
caseyryancaseyryan
authored
Merge pull request #112 from shok96/add_russian_translate_country_phone
Add russian translate country phone
2 parents 6d8bdd1 + b85dcf7 commit 4b23365

2 files changed

Lines changed: 498 additions & 4 deletions

File tree

‎lib/formatters/phone_format_page.dart‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_multi_formatter/flutter_multi_formatter.dart';
3+
4+
class PhoneFormatPage extends StatefulWidget {
5+
@override
6+
_PhoneFormatPageState createState() => _PhoneFormatPageState();
7+
}
8+
9+
class _PhoneFormatPageState extends State<PhoneFormatPage> {
10+
GlobalKey<FormState> _formKey = GlobalKey<FormState>();
11+
PhoneCountryData? _countryData;
12+
TextEditingController _phoneController = TextEditingController();
13+
TextEditingController _russianPhoneController =
14+
TextEditingController(text: '9998887766');
15+
PhoneCountryData? _initialCountryData;
16+
17+
@override
18+
void dispose() {
19+
_phoneController.dispose();
20+
super.dispose();
21+
}
22+
23+
Widget _getText(String text) {
24+
return Padding(
25+
padding: const EdgeInsets.symmetric(vertical: 15.0),
26+
child: Text(text),
27+
);
28+
}
29+
30+
@override
31+
Widget build(BuildContext context) {
32+
return Unfocuser(
33+
minScrollDistance: 10.0,
34+
child: Scaffold(
35+
appBar: AppBar(
36+
centerTitle: true,
37+
title: Text('Phone Formatter Demo'),
38+
),
39+
body: SingleChildScrollView(
40+
child: Padding(
41+
padding: const EdgeInsets.all(30.0),
42+
child: Form(
43+
key: _formKey,
44+
child: Column(
45+
crossAxisAlignment: CrossAxisAlignment.start,
46+
children: <Widget>[
47+
_getText('Type a phone number here and it will automatically' +
48+
' format and detect a country. If the number' +
49+
' does not format this means it\'s can\'t be validated\n\n' +
50+
'The USA and Canada share the same phone code (+1) ' +
51+
'and by default it\'s detected as the USA. In this case' +
52+
' you can apply your own mechanism to display a country'),
53+
TextFormField(
54+
decoration: InputDecoration(
55+
border: OutlineInputBorder(),
56+
hintText: 'Type a phone number',
57+
hintStyle: TextStyle(color: Colors.black.withOpacity(.3)),
58+
errorStyle: TextStyle(
59+
color: Colors.red,
60+
),
61+
),
62+
keyboardType: TextInputType.phone,
63+
inputFormatters: [
64+
PhoneInputFormatter(
65+
onCountrySelected: (PhoneCountryData? countryData) {
66+
setState(() {
67+
_countryData = countryData;
68+
});
69+
},
70+
allowEndlessPhone: false,
71+
)
72+
],
73+
),
74+
_getText(
75+
_countryData == null
76+
? 'A country is not detected'
77+
: 'The country is: ${_countryData?.country}',
78+
),
79+
SizedBox(height: 30.0),
80+
_getText(
81+
'The next input uses a predefined country code',
82+
),
83+
Row(
84+
children: [
85+
Expanded(
86+
flex: 3,
87+
child: CountryDropdown(
88+
printCountryName: true,
89+
initialCountryCode: 'RU',
90+
onCountrySelected: (PhoneCountryData countryData) {
91+
setState(() {
92+
_initialCountryData = countryData;
93+
});
94+
},
95+
),
96+
),
97+
SizedBox(width: 10.0),
98+
Expanded(
99+
flex: 5,
100+
child: TextFormField(
101+
key: ValueKey(_initialCountryData ?? 'country'),
102+
decoration: InputDecoration(
103+
border: OutlineInputBorder(),
104+
hintText: _initialCountryData
105+
?.phoneMaskWithoutCountryCode,
106+
hintStyle:
107+
TextStyle(color: Colors.black.withOpacity(.3)),
108+
errorStyle: TextStyle(
109+
color: Colors.red,
110+
),
111+
),
112+
keyboardType: TextInputType.phone,
113+
inputFormatters: [
114+
PhoneInputFormatter(
115+
allowEndlessPhone: true,
116+
defaultCountryCode:
117+
_initialCountryData?.countryCode,
118+
)
119+
],
120+
),
121+
)
122+
],
123+
),
124+
_getText(
125+
_initialCountryData == null
126+
? 'A country is not detected'
127+
: 'The country is: ${_initialCountryData?.country}',
128+
),
129+
SizedBox(
130+
height: 10.0,
131+
),
132+
_getText(
133+
'You can also use formatAsPhoneNumber(string) ' +
134+
'function to format a string containing a phone number. E.g ' +
135+
'79998885544 will be formatted to +7 (999) 888-55-44',
136+
),
137+
TextFormField(
138+
decoration: InputDecoration(
139+
border: OutlineInputBorder(),
140+
hintText: 'Type a phone to format',
141+
hintStyle: TextStyle(
142+
color: Colors.black.withOpacity(.3),
143+
),
144+
errorStyle: TextStyle(
145+
color: Colors.red,
146+
),
147+
),
148+
keyboardType: TextInputType.phone,
149+
controller: _phoneController,
150+
validator: (String? value) {
151+
if (!isPhoneValid(
152+
value ?? '',
153+
allowEndlessPhone: true,
154+
)) {
155+
return 'Phone is invalid';
156+
}
157+
return null;
158+
},
159+
),
160+
SizedBox(
161+
height: 20,
162+
),
163+
Container(
164+
height: 50,
165+
child: MaterialButton(
166+
textColor: Colors.white,
167+
color: Colors.blue,
168+
onPressed: () {
169+
if (_formKey.currentState!.validate()) {
170+
_phoneController.text = formatAsPhoneNumber(
171+
_phoneController.text,
172+
allowEndlessPhone: false,
173+
) ??
174+
'';
175+
}
176+
},
177+
child: Row(
178+
children: <Widget>[
179+
Expanded(
180+
child: Center(
181+
child: Text(
182+
'Apply Format',
183+
),
184+
),
185+
),
186+
],
187+
),
188+
),
189+
),
190+
SizedBox(height: 20),
191+
TextFormField(
192+
decoration: InputDecoration(
193+
border: OutlineInputBorder(),
194+
hintText: 'Type a phone to format',
195+
hintStyle: TextStyle(
196+
color: Colors.black.withOpacity(.3),
197+
),
198+
errorStyle: TextStyle(
199+
color: Colors.red,
200+
),
201+
),
202+
keyboardType: TextInputType.phone,
203+
controller: _russianPhoneController,
204+
validator: (String? value) {
205+
if (!isPhoneValid(
206+
value ?? '',
207+
allowEndlessPhone: true,
208+
defaultCountryCode: 'RU',
209+
)) {
210+
return 'Phone is invalid';
211+
}
212+
return null;
213+
},
214+
),
215+
SizedBox(height: 20),
216+
Container(
217+
height: 50,
218+
child: MaterialButton(
219+
textColor: Colors.white,
220+
color: Colors.pink,
221+
onPressed: () {
222+
_russianPhoneController.text = formatAsPhoneNumber(
223+
_russianPhoneController.text,
224+
allowEndlessPhone: false,
225+
defaultCountryCode: 'RU',
226+
) ??
227+
'';
228+
},
229+
child: Row(
230+
children: <Widget>[
231+
Expanded(
232+
child: Center(
233+
child: Text(
234+
'Apply Format for RU +7',
235+
),
236+
),
237+
),
238+
],
239+
),
240+
),
241+
),
242+
],
243+
),
244+
),
245+
),
246+
),
247+
),
248+
);
249+
}
250+
}

0 commit comments

Comments
 (0)