The function of showDialog is not showing alertDialog on the onPressed method in Flutter when trying to press the on pressed function

Question

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

Answer 1

CustomElevatedButton is missing calling the onPressed.

child: ElevatedButton(
   onPressed: onPressed, //this