Shade filter doesn’t work in flutter internet iOS – Safari

CanvasKit

use CanvasKit for rendering internet: flutter construct internet --web-renderer canvaskit

SvgPicture.string()

as a substitute of utilizing SvgPicture.asset(), load the svg as textual content, change the colour, use SvgPicture.string(). however I counsel doing it solely on Iphone – Safari. right here is how:

import 'package deal:flutter/basis.dart';
import 'dart:html' as html;

bool get isIosSafari  ua.accommodates('ipad') 

static Widget icon({double? width, double? top, Shade? shade}) {
  if (isIosSafari && shade != null) {
    return FutureBuilder(
      future: rootBundle.loadString('belongings/icon.svg'),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.executed && snapshot.hasData) {
          String svgStr = snapshot.knowledge!;
          remaining hexColor="#${shade.worth.toRadixString(16).padLeft(8, "0').substring(2)}';
          svgStr = svgStr.replaceAll(RegExp(r'fill="[^"]*"'), 'fill="$hexColor"');
          return SvgPicture.string(svgStr, width: width, top: top);
        }
        // return empty field till prepared
        return SizedBox(width: width, top: top);
      },
    );
  } else {
    return SvgPicture.asset(
      'belongings/icon.svg',
      width: width,
      top: top,
      colorFilter: shade != null ? ColorFilter.mode(shade, BlendMode.srcIn) : null,
    );
  }
}

answer for Android – Firefox is identical (however clearly the isIosSafari half goes to alter).