Ink/IconButton color inside Container

I have an IconButton inside an Ink (to give it a Border) which is inside a Container. However the Border is not visible since it is overlaid by the Containers color.

What is the best way to display an IconButton with a colored background inside a Container?

Working example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Container(
    color: Colors.pink,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  );
}

}

Use Material instead of Container (see official example)

The reason Container doesn't work is because the Ink is drawn on the underlying Material widget, as explained in the Ink doc:

> Ink splashes and highlights, as rendered by InkWell and InkResponse,
> draw on the actual underlying Material, under whatever widgets are
> drawn over the material (such as Text and Icons). If an opaque image
> is drawn over the Material (maybe using a Container or DecoratedBox),
> these ink effects will not be visible, as they will be entirely
> obscured by the opaque graphics drawn above the Material.

See working demo:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Material(
    color: Colors.red,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  );
}

}

EXTRA:

If you really need a Container or other widget that is not Material you just need to add a Material widget between the Ink Widget and the parent one. (with transparent background)

Like this:

Container(
    color: Colors.red,
    child: Material(
    color: Colors.transparent,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  ))