TileMode.mirror/repeated not implementing correctly on web

[chonghorizons]

I was trying to test out the examples for TileMode in the DartPad experimental.

In using simple sample code, the TileMode is not working correctly. That is, when I use TileMode.mirror (or TileMode.repeated), I expect to get mirrored gradients in the sample code. Instead, I just get the last value repeated forever; i.e. like TileMode.clamp

Instead, I wanted to get things like in the api docs (https://api.flutter.dev/flutter/dart-ui/TileMode-class.html) that look like this:

Here is sample code that I ran here: https://dartpad.dartlang.org/experimental/new_embeddings_demo.html

import 'package:flutter/material.dart';

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hey there, boo!'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [Aaa()],
      ),
    );
  }
}

class Aaa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 250,
      height: 250,
      child: Stack(
        children: <Widget>[
          Container(
            width: 250,
            height: 250,
            color: Colors.white,
          ),
          Container(
            padding: EdgeInsets.all(15.0),
            alignment: Alignment.bottomCenter,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment(-1.0,0),
                end: Alignment(-0.8,0),
                tileMode: TileMode.mirror,
                colors: <Color>[
                  Colors.black,
                  // Colors.black.withAlpha(0),
                  Colors.red,
                  // Colors.blue,
                ],
              ),
            ),
            child: Text(
              "Foreground Text",
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
          ),
        ],
      ),
    );
  }
}

[chonghorizons]

Verified this is NOT an issue for normal flutter (on a mobile device).

Ran similar code in IphoneEmulator and it renders fine:

[chonghorizons]

Verified: This is an issue with flutter web, not just the DartPad implementation. The same code that ran the above example generates this in the web view:

In case it's needed, the generating code is the above Aaa widget, modified to take inputs of the tileMode and message, and then rendered in a column. That is:

Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Aaa(TileMode.clamp, "TileMode.clamp"),
            Aaa(TileMode.mirror, "TileMode.mirror"),
            Aaa(TileMode.repeated, "TileMode.repeated"),
          ]
)

[iapicca]

Hi @chonghorizons
could you please provide your updated flutter doctor -v ?
Thank you

[chonghorizons]

Sure. Here you go:

flutterLast login: Sun Nov  3 01:20:13 on ttys000
Macs-MacBook-Air:~ howardchong$ flutter doctor -v
[✓] Flutter (Channel dev, v1.12.11, on Mac OS X 10.14.6 18G87, locale en-US)
    • Flutter version 1.12.11 at /Users/howardchong/Proj2019/flutterDev/flutter
    • Framework revision f40dbf8ca0 (2 days ago), 2019-11-23 01:02:54 -0500
    • Engine revision d1cac77d5a
    • Dart version 2.7.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/howardchong/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling
      support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.2, Build version 11B52
    • CocoaPods version 1.8.4

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 39.0.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build
      1.8.0_152-release-1343-b01)

[✓] VS Code (version 1.39.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.6.0

[✓] Connected device (4 available)
    • iPhone     • 35b20d3ec2dea734f40dd25b0c5f631d20a83ee6 • ios            •
      iOS 10.3.4
    • iPhone 8   • 359D18A6-CE3E-4EE5-B459-D3AD32DA565C     • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-13-2 (simulator)
    • Chrome     • chrome                                   • web-javascript •
      Google Chrome 78.0.3904.108
    • Web Server • web-server                               • web-javascript •
      Flutter Tools

• No issues found!
Macs-MacBook-Air:~ howardchong$ 

[yjbanov]

We're looking for a solution, but on the Web it's not supported in canvas APIs. We are exploring alternatives. Stay tuned.

[chonghorizons]

I actually don't think this is a high priority. I was just confused for a while.

The fastest temporary solution is just to throw a warning or error.

[iapicca]

Hi all
please see the repro steps here
Thank you

[ferhatb]

Due to #46833 , moving to P3.

[ferhatb]

Fixed via flutter/engine#22597

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.