将 function 作为参数传递给小部件

Question

I have a button that calls a widget to open a custom dialog:

child: GestureDetector(
         onTap: () {
           showDialog(
             context: context,
             builder: (context){ 
                return MovMapAlert(
titulo: "yasiguiendo".tr(),
texto: "dejarsiguiendo".tr(),
aceptar: "dejardeseguir".tr(),
cancelar: "cancelar".tr(),
funcion: SeguidoresCrud().dejarDeSeguir(documentIdSeguidores),);
 });
},
 child: Image.asset('assets/profile/boton_follow_rojo.png'),
  )
)

As you may see,I am posting some parameters to the custom dialog widget, including a function that should be executed when the user taps on a dialog button.

Here you have the custom dialog widget:

class MovMapAlert extends StatelessWidget {

  final String titulo;
  final String texto;
  final String aceptar;
  final String cancelar;
  final Function funcion;

  const MovMapAlert({Key key, this.titulo, this.texto, this.aceptar, this.cancelar, this.funcion}) : super(key: key);
  @override
  Widget build(BuildContext context) {


    return Dialog(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16)
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: _buildChild(context),
    );
  }

  _buildChild(BuildContext context) => Container(
    height: 350,
    decoration: BoxDecoration(
        color: Colors.redAccent,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.all(Radius.circular(12))
    ),
    child: Column(
      children: <Widget>[
        Container(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Image.asset('assets/images/movmap_transparente1024.png', height: 120, width: 120,),
          ),
          width: double.infinity,
          decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12))
          ),
        ),
        SizedBox(height: 24,),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(this.titulo, style: TextStyle(fontSize: 20, color: Colors.white, fontWeight: FontWeight.bold),),
        ),
        SizedBox(height: 8,),
        Padding(
          padding: const EdgeInsets.only(right: 16, left: 16),
          child: Text(this.texto, style: TextStyle(fontSize: 18,color: Colors.white), textAlign: TextAlign.center,),
        ),
        SizedBox(height: 24,),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            FlatButton(onPressed: (){
              Navigator.of(context).pop();
            }, child: Text(this.cancelar),textColor: Colors.white,),
            SizedBox(width: 8,),
            RaisedButton(onPressed: (){
              return Navigator.of(context).pop(true);
              this.funcion();
            }, child: Text(this.aceptar), color: Colors.white, textColor: Colors.redAccent,)
          ],
        )
      ],
    ),
  );
}

My issue is that the line of code that should include the function to be posted to the dialog widget:

  funcion: SeguidoresCrud().dejarDeSeguir(documentIdSeguidores),

is marked as warning in the editor, the warning message says: Convert to an if element

I guess I am not doing it well, I mean, what I need is to pass a function as parameter to another widget, if possible...

Answer 1

The problem is that you're calling the function, not passing it

Change to:

funcion: () => SeguidoresCrud().dejarDeSeguir(documentIdSeguidores),

This happens because when you pass the function using () , you're actually calling the function and passing it's return value as an argument not the function itself to be called elsewhere

Answer 2

Pass function with () invoking operator

funcion: (){
   SeguidoresCrud().dejarDeSeguir(documentIdSeguidores);
},