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).