Widget not displaying on Stack and there is no Ink effect on InkResponse

Question

I am working on my first Flutter App and I have encountered two problems. - The Container widget housing my Image widget does not get displayed on the Stack widget.

• There is no Ink effect when tapping the InkResponse container

I have tried rewriting the Container to display the image and by using Image.Network for the url instead of assets but to no avail.

  final appLogo = new Container(
    child: new Image(
      image: new AssetImage('assets/discord.png')
    ),
  );

  List<Widget> _getApps(List apps) {
    List<Widget> _appWidgets = <Widget>[];
    // make a Grid tile of the Apps
    for (int i = 0; i < apps.length; i++) {
      _appWidgets.add(
        new InkResponse(
        child: Center(
          child: new Stack(
            children: <Widget>[
              appLogo,
              new Container(height: 102, width: 102, color: Colors.red),
            ],
          )
        )
      ),
      );
    }
    return _appWidgets;
  }

appLogo should be displayed on the red box (Container) from my expectation and there should be a Splash when I tap on the InkResponse widget.

Solution

First of all, your image needs to be added to your pubspec.yaml file like so:

flutter:
  assets:
    - images/

Once you have that, you can access all your images inside "/images" or any folder name inside your project you want. Now you can access your image in this way:

Image.asset("images/myimage.jpg") // again, this in an example

Bear in mind that images are not affected by the ripple material effect, only the background of it (if the image is inside a bigger container with "empty" space). Second, you need an InkWell with onTap: method in order to show the ripple, to finish everything, you need a Material widget as this one provides the necessary effects.

So, if you want to see a the ripple effect behind the image and having it inside a Stack, you'll need to do something like:

Material(
   child: Stack(
      children: <Widget>[
             InkWell(
                 onTap: () {}, // The ripple only shows up if you have a onTap method.
                 child: Container(
                       height: 300, // 300 is a random value but has bigger height than the image itself.
                       child: Image.asset("images/myimage.jpg"),
                        ),
                 ),
             ],
    ),
)