[web] Shader doesn't work using HTML renderer

[rokeshkarthikeyan]

I have tried using a shader with gradient and image shader in my application while rendering using canvas kit web rendered shader gets applied as expected, but while using html rendered in facing incorrect fill of gradient and ImageShader not implemented for web platform.

I have attached the code snippets for gradient and image shader below:

Code snippet gradient

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Shader'),
      ),
      body: Center(
        child: Container(
          width: 400,
          height: 400,
          child: CustomPaint(
            painter: OpenPainter(),
          ),
        ),
      ),
    );
  }
}

class OpenPainter extends CustomPainter {
  List<Color> colors = const <Color>[
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow,
  ];
  List<double> stops = <double>[0.25, 0.5, 0.75, 1];
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..shader = ui.Gradient.sweep(
        Offset(200, 200),
        colors,
        stops,
      )
      ..style = PaintingStyle.fill;
    //a circle
    canvas.drawCircle(Offset(200, 200), 100, paint1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Code snippet Image Shader

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ui.Image? image4;
  // ignore: avoid_void_async
  void getImage() async {
    final Completer<ImageInfo> completer3 = Completer<ImageInfo>();
    const ImageProvider imageProvider3 = AssetImage('images/apple.png');
    imageProvider3
        .resolve(const ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool _) async {
      completer3.complete(info);
      final ImageInfo imageInfo4 = await completer3.future;
      image4 = imageInfo4.image;
      if (mounted) {
        setState(() {});
      }
    }));
  }

  @override
  Widget build(BuildContext context) {
    getImage();
    Widget? renderWidget;
    if (image4 != null) {
      renderWidget = Scaffold(
        appBar: AppBar(
          title: Text('Flutter image Shader'),
        ),
        body: Center(
          child: Container(
            width: 400,
            height: 400,
            child: CustomPaint(
              painter: OpenPainter(image4),
            ),
          ),
        ),
      );
    } else {
      renderWidget = Scaffold(
        appBar: AppBar(
          title: Text('Flutter image Shader'),
        ),
        body: Center(
          child: Container(
            width: 400,
            height: 400,
            child: Text('loading'),
          ),
        ),
      );
    }
    return renderWidget;
  }
}

class OpenPainter extends CustomPainter {
  OpenPainter(this.img1);
  var img1;
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..shader = ui.ImageShader(
        img1!,
        TileMode.repeated,
        TileMode.repeated,
        Matrix4.identity().scaled(0.5).storage,
      )
      ..style = PaintingStyle.fill;
    //a circle
    canvas.drawCircle(Offset(200, 200), 100, paint1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

I have used the following commands to build the web applications:

• flutter run -d chrome --web-renderer canvaskit

• flutter run -d chrome --web-renderer html

Here are the outputs of the web renderers:

[TahaTesser]

Hi @rokeshkarthikeyan
Can you please provide your flutter doctor -v
Thank you

[rokeshkarthikeyan]

Hi @TahaTesser ,

Please find the flutter doctor -v details below:

Thanks

[TahaTesser]

Hi @rokeshkarthikeyan
Thanks for the details, I can reproduce the gradient using html render

Used the following minimal code sample

minimal code sample

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Shader'),
      ),
      body: Center(
        child: Container(
          width: 400,
          height: 400,
          child: CustomPaint(
            painter: OpenPainter(),
          ),
        ),
      ),
    );
  }
}

class OpenPainter extends CustomPainter {
  List<Color> colors = const <Color>[
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow,
  ];
  List<double> stops = <double>[0.25, 0.5, 0.75, 1];
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..shader = ui.Gradient.sweep(
        Offset(200, 200),
        colors,
        stops,
      )
      ..style = PaintingStyle.fill;
    //a circle
    canvas.drawCircle(Offset(200, 200), 100, paint1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

stable	master
❌	❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.2, on Microsoft Windows [Version 10.0.19043.1081], locale en-US)
    • Flutter version 2.2.2 at C:\Users\Taha\Code\flutter_stable
    • Framework revision d79295af24 (2 weeks ago), 2021-06-11 08:56:01 -0700
    • Engine revision 91c9fc8fe0
    • Dart version 2.13.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_SDK_ROOT = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java.exe
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.10.31410.357
    • Windows 10 SDK version 10.0.19041.0

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.57.1)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.23.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19043.1081]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 91.0.4472.114
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 91.0.864.54

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.3.0-17.0.pre.504, on Microsoft Windows [Version 10.0.19043.1081], locale en-US)
    • Flutter version 2.3.0-17.0.pre.504 at C:\Users\Taha\Code\flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 102acbe39d (89 minutes ago), 2021-06-24 22:51:02 -0700
    • Engine revision 4bf9d638c2
    • Dart version 2.14.0 (build 2.14.0-245.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_SDK_ROOT = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.10.31410.357
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 4.2.0)
    • Android Studio at C:\Users\Taha\Code\android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.57.1)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.23.0

[✓] Connected device (4 available)
    • Windows (desktop)       • windows • windows-x64     • Microsoft Windows [Version 10.0.19043.1081]
    • Windows (UWP) (desktop) • winuwp  • windows-uwp-x64 •
    • Chrome (web)            • chrome  • web-javascript  • Google Chrome 91.0.4472.114
    • Edge (web)              • edge    • web-javascript  • Microsoft Edge 91.0.864.54

• No issues found!

✅ : No Issue ❌: Issue reproduced

Image shader is supported on master using html, canvaskit not yet supported, #33616 tracks this