Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: InkWell does not detect tap

I'm writing my first app with flutter and came onto the problem that an InkWell does not detect when it's tapped. It's a more complicated structure than I could find examples for. I wrote the following function:

class ChatOverviewElements {
  static Widget buildChatEntry(BuildContext context, String username,
      String lastMessageText,
      String lastMessageDate, bool group,
      int unread, int chatID) {
    return new Material(
      child: new Ink(
        padding: const EdgeInsets.only(right: 32.0),
        child: new InkWell(
          onTap: ChatOverviewNavigation.openChat(context, chatID),
          child: new Row(
            children: <Widget>[
              new Container(
                padding: const EdgeInsets.all(10.0),
                child: new Icon(
                  Icons.account_circle,
                  size: 60.0,
                ),
              ),
              new Expanded (
                child: new Container(
                  padding: const EdgeInsets.only(right: 5.0),
                  height: 60.0,
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          group ? new Icon(Icons.group) : new Container(),
                          new Container(width: group ? 10.0 : 0.0,),
                          TextStyles.username(username),
                        ],
                      ),
                      TextStyles.chatSnippet(lastMessageText),
                    ],
                  ),
                ),
              ),
              new Column(
                children: <Widget>[
                  new Row(
                      children: <Widget>[
                        new Icon(
                          Icons.done_all,
                          color: Colors.green,
                        ),
                        new Container(width: 8.0,),
                        TextStyles.chatDate(lastMessageDate),
                      ]),
                  new Icon(
                    Icons.thumb_up,
                    color: Colors.grey[500],
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

It creates a box like you'd see in WhatsApp etc. with username, message preview, unread badge (the thumb up icon is a placeholder for that) and so on. What I want it for that outer Container to be tappable, so I changed it so and Ink (to see the ripple) and added and InkWell and everything else as a child of that well. That does not work. It doesn't detect the tap a all and I don't understand why.

The build function is called to create the children of a ListView, which itself is nested inside a Scaffold and a Material App. That shouldn't matter though, I tried simple examples from StackOverflow within the ListView and those work just fine.

So the question is: what am I doing wrong here? Where would that InkWell have to be so the whole container is tapable and a ripple is shown on the container background ?

like image 551
Ivo Avatar asked Mar 06 '23 17:03

Ivo


1 Answers

onTap: ChatOverviewNavigation.openChat(context, chatID),

should be

onTap: () => ChatOverviewNavigation.openChat(context, chatID),

otherwise the result of ChatOverviewNavigation.openChat(context, chatID) will be used as onTap handler.

like image 56
Günter Zöchbauer Avatar answered Mar 10 '23 12:03

Günter Zöchbauer