Skip to content

TileMode.mirror/repeated not implementing correctly on web #45505

Description

@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

image

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:

image

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),
            ),
          ),
        ],
      ),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work lista: imagesLoading, displaying, rendering imagesc: renderingUI glitches reported at the engine/skia or impeller rendering levelfound in release: 1.20Found to occur in 1.20frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions