在 flutter_web 中使用 html 引擎渲染时无法显示灰色半透明遮罩

[the-eric-kwok]

demo 链接位于 https://guest-card-testing.web.app/
为了易于辨识，我将背景颜色改成了绿色。
这个问题会影响到在移动端 Safari 上运行时的显示效果。

为了复现该问题，编译时采用 flutter build web --web-renderer html 命令，且在 web/index.html 的 head 中加入以下代码：

  <script type="text/javascript">
    // 强制使用 html 引擎渲染
    window.flutterWebRenderer = "html";
  </script>

以下是示例代码：

// main.dart
import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(
        title: 'Demo',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {

  MyHomePage({
    Key? navKey,
    required this.title,
  }) : super(key: navKey);

  late final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Intro intro;
  late BuildContext globalContext;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 1), () {
      intro.start(globalContext);
    });
  }

  _MyHomePageState() {
    /// init Intro
    intro = Intro(
      stepCount: 4,
      maskClosable: true,
      onHighlightWidgetTap: (introStatus) {
        print(introStatus);
      },

      /// use defaultTheme
      widgetBuilder: StepWidgetBuilder.useDefaultTheme(
        texts: [
          'Hello, I\'m Flutter Intro.',
          'I can help you quickly implement the Step By Step guide in the Flutter project.',
          'My usage is also very simple, you can quickly learn and use it through example and api documentation.',
          'In order to quickly implement the guidance, I also provide a set of out-of-the-box themes, I wish you all a happy use, goodbye!',
        ],
        buttonTextBuilder: (currPage, totalPage) {
          return currPage < totalPage - 1 ? 'Next' : 'Finish';
        },
      ),
    );
  }

  Widget build(BuildContext context) {
    globalContext = context;
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                width: 100,
                child: Placeholder(
                  /// 2nd guide
                  key: intro.keys[1],
                  fallbackHeight: 100,
                ),
              ),
              SizedBox(
                height: 16,
              ),
              Placeholder(
                /// 3rd guide
                key: intro.keys[2],
                fallbackHeight: 100,
              ),
              SizedBox(
                height: 16,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  SizedBox(
                    width: 100,
                    child: Placeholder(
                      /// 4th guide
                      key: intro.keys[3],
                      fallbackHeight: 100,
                    ),
                  ),
                ],
              ),
              ElevatedButton(
                  key: intro.keys[0],
                  onPressed: () {
                    intro.start(context);
                  },
                  child: Text("Press me"))
            ],
          ),
        ),
      ),
    );
  }
}