How to make the highlight color of an IconButton appear over parent widget?

Question

When I set the color of a Container that holds an IconButton, I find that highlight color of the IconButton is hidden by the color of the container. Here's what I mean:

How can ensure that the blue circle appears above the red square?

Here's my code:

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyDemo()));
}

class MyDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          width: 60.0,
          height: 60.0,
          color: Colors.red,
          child: new IconButton(
            highlightColor: Colors.blue,
            icon: new Icon(Icons.add_a_photo), onPressed: ()=>{},),
        ),
      ),
    );
  }
}

Answer 1

InkSplash occurs on the closest ancestor Material widget.

You can get that widget using Material.of(context) which provides a few helpers for InkSplashes.

In your case, it's InkResponse instantiated by IconButton which provoke the Splash effect. But the targeted Material widget is instantiated by Scaffold. Which is an ancestor of your background. Therefore the background paints above your InkSplash.

To solve this problem you'd have to introduce a new Material instance between your background and your IconButton.

Which leads to :

Guh, we solved the problem. But now it's cropped ! Let's continue.

The easiest option would be to split your rendering in two branches. One for the background, and one for the UI. Something similar should do the trick :

return new Scaffold(
  body: new Stack(
    fit: StackFit.expand,
    children: <Widget>[
      new Center(
        child: new Container(
          height: 60.0,
          width: 60.0,
          color: Colors.red,
        ),
      ),
      new Material(
        type: MaterialType.transparency,
        child: new IconButton(
          highlightColor: Colors.blue,
          icon: new Icon(Icons.add_a_photo),
          onPressed: () => {},
        ),
      ),
    ],
  ),
);

Answer 2

Try this

 Material(
    color: Colors.transparent,
    shape: CircleBorder(),
    clipBehavior: Clip.hardEdge,
    child: IconButton(
      icon: Icon(Icons.arrow_back),
      iconSize: 30,
      color: Colors.white,
      onPressed: () {

      },
    ),
  );