FlutterでSVGアイコンの色を変更する方法

ColorFilteredウィジェットを使用する方法: ColorFilteredウィジェットを使用すると、指定した色でSVGアイコンをフィルタリングできます。

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcIn),
  child: SvgPicture.asset('assets/icon.svg'),
)

上記の例では、アイコンが赤色で表示されます。ColorFilteredウィジェットのcolorFilterプロパティには、変更したい色とブレンドモードを指定します。

SvgPicture.asset(
  'assets/icon.svg',
  color: Colors.blue,
)

上記の例では、アイコンが青色で表示されます。SvgPictureウィジェットのcolorプロパティに変更したい色を指定します。

まず、pubspec.yamlファイルにflutter_svgパッケージを追加します。

dependencies:
  flutter_svg: ^x.x.x  // バージョンは最新のものに置き換えてください

次に、以下のようにflutter_svgパッケージを使用してSVGアイコンの色を変更します。

import 'package:flutter_svg/flutter_svg.dart';
SvgPicture.svg(
  svgString,
  color: Colors.green,
)

上記の例では、アイコンが緑色で表示されます。SvgPicture.svgメソッドのcolorプロパティに変更したい色を指定します。

これらは、FlutterでSVGアイコンの色を変更するための一般的な方法です。どの方法を選択するかはプロジェクトの要件によります。詳細なドキュメントやコミュニティのサンプルコードを参考にしながら、最適な方法を選んでください。