Inkwell for dummies

Question

(...and with dummies I mean myself)

what am I doing wrong here? I don't see any animation, I tried to change the order of container/inkwell because I saw somewhere that it creates some issue, but I'm stuck. Can anyone help?

  class CardButton extends StatelessWidget {
  final String input;
  CardButton({this.input});

  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[100],
      width: 50.0,
      height: 50.0,
      alignment: Alignment.center,
      child: Material(
        child: InkWell(
          splashColor: Colors.amber,
          onTap: draw(),
          child: Text(input),
        ),
      ),
    );
  }
}

draw() {
  //todo
}

thanks in advance

[edit 25/10]

I tried out some of the solutions proposed, but doing so the widget where this one is 'nested' throw me an error,

writing the widget where I use the "CardButton" below:

   class CardGrid extends StatelessWidget {
  final List<String> cardList = [
    'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300.0,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              CardButton(input: cardList[0]),
              CardButton(input: cardList[1]),
              CardButton(input: cardList[2])
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              CardButton(input: cardList[3]),
              CardButton(input: cardList[4]),
              CardButton(input: cardList[5])
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              CardButton(input: cardList[6]),
              CardButton(input: cardList[7]),
              CardButton(input: cardList[8])
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              CardButton(input: cardList[9]),
              CardButton(input: cardList[10]),
              CardButton(input: cardList[11]),
              CardButton(input: cardList[12])
            ],
          ),
        ],
      ),
    );
  }
}

I'm adding here the screenshot of the app, the first is with my original code, the second (with the error) is with the "proposed" solution

https://stackoverflow.com/a/52697978/6618622 – CopsOnRoad Oct 24 '18 at 17:01 — CopsOnRoad, Oct 24 '18 at 17:01
CopsOnRoad - The linked answer solves a different problem. – Soundbytes Oct 25 '18 at 07:09 — Soundbytes, Oct 25 '18 at 07:09
can you please post a screenshot what you want – Lakhwinder Singh Oct 25 '18 at 07:24 — Lakhwinder Singh, Oct 25 '18 at 07:24
CopsOnRoad your code works <3 Thank you – Francesco Iapicca Oct 25 '18 at 16:28 — Francesco Iapicca, Oct 25 '18 at 16:28

Soundbytes · Answer 1 · 2018-10-25T16:44:24.143

1

You need to pass the onTap function without the braces:

child: InkWell(
  splashColor: Colors.amber,
  onTap: draw, // don't use braces here (except your function returns
               // a reference to the actual onTap function.                      
  child: Text(input),
),

Note that with the current layout only the inner Text element is animated. If you want the InkWell to cover the entire button area you'll have to reorder the widget tree to:

Material > InkWell > Container > Text

  Widget build(BuildContext context) {
    return Material(
      color: Colors.grey[100],
      child: InkWell(
        splashColor: Colors.amber,
        onTap: draw,
        child: Container(
          width: 100.0,
          height: 100.0,
          alignment: Alignment.center,
          child: Text(input),
        ),
      ),
    );
  }

edited Oct 25 '18 at 16:44

answered Oct 25 '18 at 06:14

Soundbytes

1,149
9
17

Can you please mention what special thing you added in your answer which my answer failed to add? – CopsOnRoad Oct 25 '18 at 14:50
[original post updated] somehow using this code the widget "recipient" of this one throw me an error :/ didn't happen before, was a $hitty result, but not exploding. adding the screenshot in the original post – Francesco Iapicca Oct 25 '18 at 15:49
CopsOnRoad - Sure, from what I understand from reading his code the poster alrady had everything right that is dealt with in your answer. What kept the inkwell from working is that he did not pass a reference to the draw function to the constructor but a function call instead. Your answer is not addressing this error. – Soundbytes Oct 25 '18 at 15:51
sorry my comment was not very clear - 1. changed 'Draw()' in 'draw', nothing changed; - 2. changed my code with "Material > InkWell > Container > Text" posted by Andreas, return me the error shown in the edited original post; I posted the code where this widget is contained mostly to give a meaning to the screenshot, I don't think it contains any error (does it?) – Francesco Iapicca Oct 25 '18 at 16:03
I have checked your container code with my version of the button and it does not produce an error here. You can easily debug the error by looking up the code line that is given in the error message – Soundbytes Oct 25 '18 at 16:23
Just run in debug mode. The code will halt at the exeption. Then climb up the call stack until you get to your own code that produces the error. – Soundbytes Oct 25 '18 at 16:29
CopsOnRoad - Thanks for letting me know that I could have made myself clearer. I have now edited my answer. – Soundbytes Oct 25 '18 at 16:38

Inkwell for dummies

1 Answers1