This is very simple to used for country code in your mobile login screen on a flutter app.
Please following some steps and get the desire output on below screen and video.
required lib – intl_phone_field: ^3.1.0
Import library
import 'package:intl_phone_field/intl_phone_field.dart';country code and mobile number filed : flutter mane
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding:
const EdgeInsets.only(left: 32.0, top: 10),
child: Text(
'Phone Number',
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: TextStyle(
color: ColorConstant.gray700,
fontSize: getFontSize(
14,
),
fontFamily: 'Poppins',
fontWeight: FontWeight.w500,
),
),
),
),
Container(
padding: const EdgeInsets.only(
left: 30, right: 35, top: 6),
child: Column(children: <Widget>[
// ignore: avoid_unnecessary_containers
Container(
child: IntlPhoneField(
dropdownIconPosition: IconPosition.trailing,
flagsButtonPadding: EdgeInsets.only(left: 10),
dropdownIcon: const Icon(
Icons.arrow_drop_down,
color: AppColors.textWaterColor,
size: 18,
),
controller: mobileController,
style: TextStyle(
fontFamily: 'Poppins',
fontStyle: FontStyle.normal,
fontSize: 12,
color: AppColors.textRegColor,
),
decoration: const InputDecoration(
floatingLabelBehavior:
FloatingLabelBehavior.never,
contentPadding:
EdgeInsets.fromLTRB(16, 10, 10, 5),
fillColor: Colors.white,
filled: true,
//decoration for Input Field
labelText:
'Enter your 10 dight phone number',
labelStyle: TextStyle(
color: AppColors.textWaterColor,
fontSize: 13,
fontFamily: 'Poppins',
fontStyle: FontStyle.normal,
),
border: OutlineInputBorder(
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color:
AppColors.textFormFiledBorderColor,
),
),
),
initialCountryCode:
'IN',
onChanged: (phone) {
setState(() {
codeMobile = phone.countryCode;
});
print(phone
.completeNumber);
print(phone
.countryCode);
print(phone.number);
},
)),
])),
onError
? Positioned(
bottom: 0,
child: Padding(
padding: const EdgeInsets.only(left: 30),
child: Text('',
style: TextStyle(color: Colors.red)),
))
: Container(),
Output
video
more info – How do I create a Login, Sing Up & Forget my password in Flutter?
