phone_text_field

Description:

phone text field

phone_text_field #
Phone Number TextFiled is a Flutter plugin that allows you to parse, validate, format and other utilities for to international phone numbers and allow localization.

Demo gif #

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
phone_text_field: any
copied to clipboard

Get the package using your IDE's GUI or via command line with

$ pub get
copied to clipboard

Import the phone_text_field.dart file in your app

import 'package:phone_text_field/phone_text_field.dart';
copied to clipboard
Features #

Validate phone number
Select country code
Support arabic & english & french

Usage #
default widget
PhoneTextField(
onChanged: (value) {},
),
copied to clipboard
custom text style
PhoneTextField(
locale: const Locale('en'),
decoration: const InputDecoration(
filled: true,
contentPadding: EdgeInsets.zero,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(),
),
prefixIcon: Icon(Icons.phone),
labelText: "Phone number",
),
searchFieldInputDecoration: const InputDecoration(
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(),
),
suffixIcon: Icon(Icons.search),
hintText: "Search country",
),
initialCountryCode: "AE",
onChanged: (phone) {
debugPrint(phone.completeNumber);
},
),
copied to clipboard
arabic style
PhoneTextField(
locale: const Locale('ar'),
decoration: const InputDecoration(
filled: true,
contentPadding: EdgeInsets.zero,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(),
),
prefixIcon: Icon(Icons.phone),
labelText: "رقم الهاتف",
),
searchFieldInputDecoration: const InputDecoration(
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(),
),
suffixIcon: Icon(Icons.search),
hintText: "بحث عن بالاسم او الرمز",
),
dialogTitle: "اختر الدوله",
initialCountryCode: "AE",
onChanged: (phone) {
debugPrint(phone.completeNumber);
},
),
copied to clipboard
Screenshots #

local(en)


local(ar)