I'm using Inkwell() for some containers to get button interactivity. Inside widget 1 with a column I want to put some of these containers in. Therefor I created widget 2 as a defining class for my containers.

Problem: When I'm using Inkwell() inside widget 1 I can call a certain function, but when I'm using one of the containers from widget 2 it doesn't work. Not even a print()-function gets called.

Here is the code (the Inkwell() under the ContainerButton() is just there to show the working solution):

void ShowAnswerBox(String headline, String answer) {

      answerBoxHeadline = headline;
      answerBoxText = answer;

      setState(() {
        answerBoxVisible = !answerBoxVisible;});
    }

return Material(
      child: Center(
        child: Container(
          color: Colors.blueGrey,
          height: double.infinity,
          child: SingleChildScrollView(
            child: Column(
              //mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Center(
                  child: SizedBox(height: size.height*0.9,
                    child: Stack(
                      children:[
                        Padding(
                          padding: const EdgeInsets.only(top: 75),
                          child: SingleChildScrollView(
                            child: Column(//mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Container(color: Colors.blueGrey[200], child: Center(child: Text("Funktionsterm: f(x) = $factorA(x${factorB >= 0 ? " " : ""}$factorB)²${factorC >= 0 ? " " : ""} $factorC", style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold))),width: double.infinity,height: 100),
                              SizedBox(height: 15),
                              ContainerButton(onTap: (){print("tapped");}, containerColor: Colors.redAccent, containerText: "Scheitelpunkt: S(${factorB*-1}/$factorC)"),


                              InkWell(onTap:(){ShowAnswerBox("Überschrift Scheitelpunkt","Lösungsweg Scheitelpunkt");},child: Container(width: 350,height: 100,decoration: BoxDecoration(color: Colors.redAccent,borderRadius: BorderRadius.circular(20), border: Border.all(color: Colors.black38, width: 5),
                                boxShadow: [BoxShadow(
                                  color: Colors.black54,
                                  blurRadius: 2.0,
                                  spreadRadius: 0.0,
                                  offset: Offset(2.0, 2.0), // shadow direction: bottom right
                                )
                              ],),
                                  child: Center(child: Text("Scheitelpunkt: S(${factorB*-1}/$factorC)", style: TextStyle(fontSize: 25))))),

Here is widget 2:

class ContainerButton extends StatefulWidget {

  final Function onTap;
  final Color containerColor;
  final String containerText;

  const ContainerButton({Key? key, required this.onTap, required this.containerColor, required this.containerText}) : super(key: key);

  @override
  State<ContainerButton> createState() => _ContainerButtonState();
}

class _ContainerButtonState extends State<ContainerButton> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: InkWell(onTap: (){widget.onTap;},child: IgnorePointer(
        child: Container(width: 350,height: 100,decoration: BoxDecoration(color: widget.containerColor,borderRadius: BorderRadius.circular(20), border: Border.all(color: Colors.black38, width: 5),
          boxShadow: [BoxShadow(
            color: Colors.black54,
            blurRadius: 2.0,
            spreadRadius: 0.0,
            offset: Offset(2.0, 2.0), // shadow direction: bottom right
          )
          ],),  child: Center(child: Text(widget.containerText, style: TextStyle(fontSize: 25)))),
      )),
    );
  }
}

CodePudding user response：

You are calling function in a wrong way in widget 2, you forget to call (), change it to this:

child: InkWell(
    onTap: widget.onTap,
    child: IgnorePointer(
    ...
)

or this:

child: InkWell(
    onTap: (){
      widget.onTap();
    },
    child: IgnorePointer(
    ...
)