diff --git a/third_party/packages/flutter_svg/README.md b/third_party/packages/flutter_svg/README.md index aa87cf2dd02..868fc8250fb 100644 --- a/third_party/packages/flutter_svg/README.md +++ b/third_party/packages/flutter_svg/README.md @@ -127,6 +127,43 @@ import 'dart:ui' as ui; pictureInfo.picture.dispose(); ``` +or if you want to scale it, you can do something like: + + +```dart +import 'dart:ui' as ui; + +// ยทยทยท + const rawSvg = '''...'''; + final PictureInfo pictureInfo = await vg.loadPicture( + const SvgStringLoader(rawSvg), + null, + ); + + // You can convert the picture to a scaled image: + const double targetWidth = 512; + const double targetHeight = 512; + final pictureRecorder = ui.PictureRecorder(); + final canvas = Canvas( + pictureRecorder, + Rect.fromPoints( + Offset.zero, + const Offset(targetWidth, targetHeight), + ), + ); + canvas.scale( + targetWidth / pictureInfo.size.width, + targetHeight / pictureInfo.size.height, + ); + canvas.drawPicture(pictureInfo.picture); + final ui.Image scaledImage = await pictureRecorder.endRecording().toImage( + targetWidth.ceil(), + targetHeight.ceil(), + ); + + pictureInfo.picture.dispose(); +``` + The `SvgPicture` helps to automate this logic, and it provides some convenience wrappers for getting assets from multiple sources. diff --git a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart index aa28285dff1..1bc3e21a0a5 100644 --- a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart +++ b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart @@ -6,9 +6,11 @@ // intended for use as an actual example application. // #docregion OutputConversion +// #docregion OutputScaling import 'dart:ui' as ui; // #enddocregion OutputConversion +// #enddocregion OutputScaling import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; @@ -101,6 +103,41 @@ Future convertSvgOutput() async { return image; } +/// Demonstrates scaling SVG to a larger image +Future scaleSvgOutput() async { + // #docregion OutputScaling + const rawSvg = '''...'''; + final PictureInfo pictureInfo = await vg.loadPicture( + const SvgStringLoader(rawSvg), + null, + ); + + // You can convert the picture to a scaled image: + const double targetWidth = 512; + const double targetHeight = 512; + final pictureRecorder = ui.PictureRecorder(); + final canvas = Canvas( + pictureRecorder, + Rect.fromPoints( + Offset.zero, + const Offset(targetWidth, targetHeight), + ), + ); + canvas.scale( + targetWidth / pictureInfo.size.width, + targetHeight / pictureInfo.size.height, + ); + canvas.drawPicture(pictureInfo.picture); + final ui.Image scaledImage = await pictureRecorder.endRecording().toImage( + targetWidth.ceil(), + targetHeight.ceil(), + ); + + pictureInfo.picture.dispose(); + // #enddocregion OutputScaling + return scaledImage; +} + // #docregion ColorMapper class _MyColorMapper extends ColorMapper { const _MyColorMapper();