SvgPicture.asset constructor

SvgPicture.asset(String assetName, { Key? key, bool matchTextDirection = false, AssetBundle? bundle, String? package, double? width, double? height, BoxFit fit = BoxFit.contain, AlignmentGeometry alignment = Alignment.center, bool allowDrawingOutsideViewBox = false, WidgetBuilder? placeholderBuilder, String? semanticsLabel, bool excludeFromSemantics = false, Clip clipBehavior = Clip.hardEdge, SvgTheme? theme, ColorFilter? colorFilter, @Deprecated('Use colorFilter instead.') Color? color, @Deprecated('Use colorFilter instead.') BlendMode colorBlendMode = ui.BlendMode.srcIn, @Deprecated('This no longer does anything.') bool cacheColorFilter = false, })

Instantiates a widget that renders an SVG picture from an AssetBundle.

The key will be derived from the assetName, package, and bundle arguments. The package argument must be non-null when displaying an SVG from a package and null otherwise. See the Assets in packages section for details.

Either the width and height arguments should be specified, or the widget should be placed in a context that sets tight layout constraints. Otherwise, the image dimensions will change as the image is loaded, which will result in ugly layout changes.

If matchTextDirection is set to true, the picture will be flipped horizontally in TextDirection.rtl contexts.

The allowDrawingOutsideOfViewBox parameter should be used with caution - if set to true, it will not clip the canvas used internally to the view box, meaning the picture may draw beyond the intended area and lead to undefined behavior or additional memory overhead.

A custom placeholderBuilder can be specified for cases where decoding or acquiring data may take a noticeably long time.

The color and colorBlendMode arguments, if specified, will be used to set a ColorFilter on any Paints created for this drawing.

The theme argument, if provided, will override the default theme used when parsing SVG elements.

Assets in packages

To create the widget with an asset from a package, the package argument must be provided. For instance, suppose a package called my_icons has icons/heart.svg .

Then to display the image, use:

SvgPicture.asset('icons/heart.svg', package: 'my_icons')

Assets used by the package itself should also be displayed using the package argument as above.

If the desired asset is specified in the pubspec.yaml of the package, it is bundled automatically with the app. In particular, assets used by the package itself must be specified in its pubspec.yaml.

A package can also choose to have assets in its 'lib/' folder that are not specified in its pubspec.yaml. In this case for those images to be bundled, the app has to specify which ones to include. For instance a package named fancy_backgrounds could have:

lib/backgrounds/background1.svg
lib/backgrounds/background2.svg
lib/backgrounds/background3.svg

To include, say the first image, the pubspec.yaml of the app should specify it in the assets section:

 assets:
   - packages/fancy_backgrounds/backgrounds/background1.svg

The lib/ is implied, so it should not be included in the asset path.

See also:

• flutter.io/assets-and-images/, an introduction to assets in Flutter.

If excludeFromSemantics is true, then semanticsLabel will be ignored.

Implementation

SvgPicture.asset(
  String assetName, {
  super.key,
  this.matchTextDirection = false,
  AssetBundle? bundle,
  String? package,
  this.width,
  this.height,
  this.fit = BoxFit.contain,
  this.alignment = Alignment.center,
  this.allowDrawingOutsideViewBox = false,
  this.placeholderBuilder,
  this.semanticsLabel,
  this.excludeFromSemantics = false,
  this.clipBehavior = Clip.hardEdge,
  SvgTheme? theme,
  ui.ColorFilter? colorFilter,
  @Deprecated('Use colorFilter instead.') ui.Color? color,
  @Deprecated('Use colorFilter instead.')
  ui.BlendMode colorBlendMode = ui.BlendMode.srcIn,
  @Deprecated('This no longer does anything.') bool cacheColorFilter = false,
})  : bytesLoader = SvgAssetLoader(
        assetName,
        packageName: package,
        assetBundle: bundle,
        theme: theme,
      ),
      colorFilter = colorFilter ?? _getColorFilter(color, colorBlendMode);