色滤波器在flutter web iOS中不起作用-Safari

Question

i在我的flutter项目中使用flutter_svg，我的功能可以用

特定的颜色返回

SvgPicture Widget：：

static Widget icon({double? width, double? height, Color? color}) {
    return SvgPicture.asset(
      'assets/icon.svg',
      width: width,
      height: height,
      colorFilter:
          color != null ? ColorFilter.mode(color, BlendMode.srcIn) : null,
    );
}

它在其他平台上效果很好，但仅在IPHONE -SAFARI浏览器上使用HTML时，颜色选项不起作用。 问题不是颤动，包装或HTML。 Safari不支持所述的颜色过滤器Herey。 如何使它起作用？

solutions

Answer 1

canvaskit

使用

canvaskit

用于渲染网络：

flutter build web --web-renderer canvaskit

SVGPICTURE.STRING（）

使用

SvgPicture.asset()

，加载SVG作为文本，更改颜色，使用

SvgPicture.string()

。但是我建议仅在

IPHONE -SAFARI

上这样做。这是：

import 'package:flutter/foundation.dart';
import 'dart:html' as html;

bool get isIosSafari {
  if (!kIsWeb) return false;
  final ua = html.window.navigator.userAgent.toLowerCase();
  final isIos = ua.contains('iphone') || ua.contains('ipad') || ua.contains('ipod');
  // Ensure it's Safari and not another browser on iOS (like Chrome or Firefox)
  final isSafari = ua.contains('safari') && !ua.contains('crios') && !ua.contains('fxios');
  return isIos && isSafari;
}

static Widget icon({double? width, double? height, Color? color}) {
  if (isIosSafari && color != null) {
    return FutureBuilder<String>(
      future: rootBundle.loadString('assets/icon.svg'),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
          String svgStr = snapshot.data!;
          final hexColor =
              '#${color.value.toRadixString(16).padLeft(8, '0').substring(2)}';
          svgStr = svgStr.replaceAll(RegExp(r'fill="[^"]*"'), 'fill="$hexColor"');
          return SvgPicture.string(svgStr, width: width, height: height);
        }
        // return empty box until ready
        return SizedBox(width: width, height: height);
      },
    );
  } else {
    return SvgPicture.asset(
      'assets/icon.svg',
      width: width,
      height: height,
      colorFilter: color != null ? ColorFilter.mode(color, BlendMode.srcIn) : null,
    );
  }
}