[web] Regression : Containers and CustomPaints are always drawn behind images

[rxlabz]

Since 1.10.17, if a Stack contains an image and colored Container or CustomPaint on top of it, drawn shapes are not visible.

master branch : Flutter (Channel master, v1.10.17-pre.74, on Mac OS X 10.14.6 18G1012, locale fr-FR)

⚠️UPDATE It's now reproduced on last dev release ( 1.12.1 )

On dev branch 1.10.16 : works as expected

On master branch and dev branch 1.12.1

On master branch with an image with half opacity

Steps to Reproduce

You can download and run the project

1. add a Stack in a screen
2. add an Image ( asset or network ) to the stack
3. add some container with size and color on top of it
4. add a CustomPaint and draw something with a CustomPainter

Target Platform : Web
Target OS version/browser : MacOS Chrome
Devices: iMac, iPhone, iPad

Code

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StackScreen(),
    );
  }
}

class StackScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Opacity(opacity: 1,child: Image.asset('assets/img.png')),
          CustomPaint(size: Size(200, 200), painter: MyPainter()),
          Align(
            alignment:Alignment.topRight,
            child: Container(color: Colors.yellow, width: 100, height: 100),
          ),
          RaisedButton(
            child: Text('A Button', style: TextStyle(color: Colors.pink)),
            onPressed: () {},
          )
        ],
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
        Rect.fromPoints(Offset.zero, size.bottomRight(Offset.zero)),
        Paint()
          ..color = Colors.red
          ..style = PaintingStyle.fill);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

[rxlabz]

The bug now happens in the last dev release : Flutter 1.12.1 • channel dev • https://github.com/flutter/flutter.git
Framework • revision 86c91b1 (4 days ago) • 2019-11-11 13:29:46 -0800
Engine • revision 31cd2df
Tools • Dart 2.7.0

[TobiasHeidingsfeld]

Can confirm this bug and it is a critical problem

[owenmech]

Occurs even if the image is part of a parent widget, not just with a Stack.

Edit: Temporary "fix" is wrapping the image with an Opacity of 0.99