简体   繁体   中英

Display text over a clickable image using Flutter

I'm trying to display some text over a clickable image. I'm using the InkWell widget to make the image clickable, and the Stack widget to overlay the Text widget:

new Expanded(
  child: new Stack(
    children: <Widget>[
      new InkWell(
        onTap: (){ _doSomething(); },
        child: Image.asset("images/my-image.jpg"),
      ),
      new Text("Some text"),
    ],
  ),
)

This way I can only tap on the image section not filled with the text, and that's not good. I would like my funtion to run even if the overlay text is tapped.

I tried using the FlatButton widget instead of the Text and somehow it works, but I'm sure this is not the proper way to do this. Do you have any advise?

new Expanded(
  child: new Stack(
    children: <Widget>[
      new InkWell(
        onTap: (){ _doSomething(); },
        child: Image.asset("images/my-image.jpg"),
      ),
      new FlatButton(
        onPressed: (){_doSomething;},
        child: Text("Some text"),
      )
    ],
  ),
),

Put the stack inside the Inkwell.

Expanded(
      child: InkWell(
        onTap: () => _doSomething(),
        child: Stack(
          children: <Widget>[
            Image.asset("images/my-image.jpg"),
            Text("Some text"),
          ],
        ),
      ),
    )

What if you'd move the InkWell higher up the stack?

Expanded(
  child: InkWell(
    onTap: (){ _doSomething(); },
    child: Stack(
      children: <Widget>[
        Image.asset("images/my-image.jpg"),
        Text("Some text"),
      ],
    ),
  ),
),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM