This is the ShowDialog function that i have created but the problem doesn't seem to be understable to me as i think i have made it quite right.
showAlertDialog({
required BuildContext context,
required String message,
String? btnText,
}) {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text(
message,
style: TextStyle(
// color: context.theme.greyColor,
fontSize: 15,
),
),
contentPadding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(
btnText ?? "OK",
style: TextStyle(
// color: context.theme.circleImageColor,
),
),
),
],
);
});
}
Please if anyone can help me with this....
This is the LoginPage on which at the bottom last of the code FloatingActionButton does not work
class LoginPage extends StatefulWidget {
const LoginPage({Key? key}) : super(key: key);
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
late TextEditingController countryNameController;
late TextEditingController countryCodeController;
late TextEditingController phoneNumberController;
sendCodeToPhone(){
final phone = phoneNumberController.text;
final name = countryNameController.text;
if(phone.isEmpty){
return showAlertDialog(
context: context,
message: 'Please enter your phone number',
);
}else if(phone.length < 9){
return showAlertDialog(
context: context,
message: "The phone number you entered is too short for the country: $name\n\nInclude your area code if you haven't",
);
}else if(phone.length > 10){
return showAlertDialog(
context: context,
message: "The phone number you entered is too long for the country: $name",
);
}
}
showCoutryCodePicker(){
showCountryPicker(
context: context,
showPhoneCode: true,
favorite: ['PK'],
countryListTheme: CountryListThemeData(
bottomSheetHeight: 600,
backgroundColor: Theme.of(context).colorScheme.background,
flagSize: 22,
borderRadius: BorderRadius.circular(20),
textStyle: TextStyle(
color: context.theme.greyColor,
),
inputDecoration: InputDecoration(
labelStyle: TextStyle(
color: context.theme.greyColor,
),
prefixIcon: const Icon(Icons.language, color: Coloors.greenDark,),
hintText: 'Search country code or name',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: context.theme.greyColor!.withOpacity(0.2),
),
),
focusedBorder: const UnderlineInputBorder(
borderSide: BorderSide(
color: Coloors.greenDark,
),
),
),
),
onSelect: (country){
countryNameController.text = country.name;
countryCodeController.text = country.countryCode;
},
);
}
@override
void initState() {
countryNameController = TextEditingController(text: 'Pakistan');
countryCodeController = TextEditingController(text: '92');
phoneNumberController = TextEditingController();
super.initState();
}
@override
void dispose() {
countryNameController.dispose();
countryCodeController.dispose();
phoneNumberController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
title: Text(
"Enter your phone number",
style: TextStyle(
color: context.theme.authAppBarTextColor,
),
),
centerTitle: true,
actions: [
CustomIconButton(
onTap: (){},
icon: Icons.more_vert,
),
],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 10),
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'WhatsApp will need to verify your phone number. ',
style: TextStyle(
color: context.theme.greyColor,
height: 1.5,
),
children: [
TextSpan(
text: "What's my number?",
style: TextStyle(
color: context.theme.blueColor,
),
),
]
),
),
),
const SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 60),
child: CustomTextField(
onTap: showCoutryCodePicker,
controller: countryNameController,
readOnly: true,
suffixIcon: const Icon(
Icons.arrow_drop_down,
color: Coloors.greenDark,
),
),
),
const SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 60),
child: Row(
children: [
SizedBox(width: 70,
child: CustomTextField(
onTap: showCoutryCodePicker,
controller: countryCodeController,
prefixText: '+',
readOnly: true,
),
),
const SizedBox(width: 10,),
Expanded(child: CustomTextField(
controller: phoneNumberController,
hintText: 'phone number',
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
),
),
],
),
),
const SizedBox(height: 20,),
Text('Carrier charges may apply',
style: TextStyle(
color: context.theme.greyColor,
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: CustomElevatedButton(
onPressed: sendCodeToPhone,
text: 'NEXT',
buttonWidth: 90,
),
);
}
}
as it is seen above the floatingActionbutton contains the on pressed which has the method sendCodeToPhone which when pressed does not give any alertDialog
class CustomElevatedButton extends StatelessWidget {
final double? buttonWidth;
final VoidCallback onPressed;
final String text;
const CustomElevatedButton(
{Key? key, required this.text, this.buttonWidth, required this.onPressed}) : super(key : key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 42,
width: buttonWidth ?? MediaQuery.of(context).size.width - 100,
child: ElevatedButton(
onPressed: (){},
style: ElevatedButton.styleFrom(
backgroundColor: Coloors.greenDark,
foregroundColor: Coloors.backgroundDark,
splashFactory: NoSplash.splashFactory,
elevation: 0,
shadowColor: Colors.transparent,
),
child: Text(text)),
);
}
}
i have included the CustomElevatedButton AS well
CustomElevatedButton is missing calling the onPressed.
child: ElevatedButton(
onPressed: onPressed, //this