How to show alertdialog when button is pressed?

Question

Following is the part of my homepage.dart which is running fine but on click of IconButton nothing happens.

 ...
 return Scaffold(
  appBar: AppBar(
    title: Text('Lorem Ipsum'),
    leading: IconButton(      
      icon: Icon(Icons.info),
      onPressed: () => AboutWidget(),
    ),
  ),
  body: ...

This is my about_widget.dart file where my AboutWidget is defined. What am i doing wrong?

 import 'package:flutter/material.dart';
class AboutWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('data'),
    );
  }
}

Hairline

Answer 1

You have to call showDialog function

AppBar(
  title: Text('Lorem Ipsum'),
  leading: IconButton(
    icon: Icon(Icons.info),
    onPressed: () => showDialog(
      context: context,
      builder: (context) => AboutWidget(),
    ),
  ),
)

Trotskyite

Answer 2

Use Flutter native showDialog function to show a dialog.

For your code, you could try this:

return Scaffold(
  appBar: AppBar(
    title: Text('Lorem Ipsum'),
    leading: IconButton(      
      icon: Icon(Icons.info),
      onPressed: () => showDialog(
        context: context,
        builder: (context){
          return AboutWidget();
        }
      ),
    ),
  ),
);

So when the button is pressed, you should call the showDialog method.

Lissotrichous

Answer 3

Using some button, that also receives a reference to a function:

FilledButton.icon(
onPressed: () => showDialog(
    context: context,
    builder: (context) => CustomDialogAlert(
        title: '¿Desea proceder?',
        description:
            'Esta acción de BORRADO no puede ser deshecha.',
        buttonLeft: 'Cancelar',
        buttonRight: 'Aceptar',
        callbackFunction: _submitFormDelete)),
icon: const Icon(Icons.delete_outline_outlined),
label: const Text('Borrar')
), // FilledButton.icon

And a stateless class:

import 'package:flutter/material.dart';

class CustomDialogAlert extends StatelessWidget {
  final String title;
  final String description;
  final String buttonLeft;
  final String buttonRight;
  final Function() callbackFunction;

  const CustomDialogAlert(
      {super.key,
      this.buttonLeft = 'Cancelar',
      this.buttonRight = 'Ok',
      required this.description,
      required this.title,
      required this.callbackFunction});

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(title),
      content: Text(description),
      actions: <Widget>[
        TextButton(
          onPressed: () => Navigator.pop(context, 'Cancel'),
          child: Text(buttonLeft),
        ),
        TextButton(
          onPressed: () => callbackFunction(),
          child: Text(buttonRight),
        ),
      ],
    );
  }
}

Result is:

Talky

Answer 4

On press of the button you are calling AboutWidget(). Its a statless widget. So it needs to be build in the build method of your app. On button click this wont show the dialog. Instead use showDialog method and inside that use your alert dialog to display the dialog on the screen.

Desta