How to Make Better Use of SVG in Flutter Applications?

Examples

Current Application

The Main Version of Flutter Does Not Support SVG

Operating Systems Have No Intention to Support SVG

Unlike SVG, Vector Fonts Are Supported

Improve SVG Application by Combining with Tools and Processes

Make SVG Great Again

SvgPicture.asset(
'assets/adsmall.svg',
placeholderBuilder: (BuildContext context) => Container(
child: const CircularProgressIndicator()),
),
SvgPicture.network(
'https://raw.githubusercontent.com/dnfield/flutter_svg/master/example/assets/deborah_ufw/new-camera.svg',
placeholderBuilder: (BuildContext context) => Container(
child: const CircularProgressIndicator()),
),

Use Tools to Avoid Pitfalls

How flutter_svg Works

flutter_svg

SvgPicture.asset(
String assetName, {
Key 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,
Color color,
BlendMode colorBlendMode = BlendMode.srcIn,
this.semanticsLabel,
this.excludeFromSemantics = false,
}) : pictureProvider = ExactAssetPicture(
allowDrawingOutsideViewBox == true
? svgStringDecoderOutsideViewBox
: svgStringDecoder,
assetName,
bundle: bundle,
package: package,
colorFilter: _getColorFilter(color, colorBlendMode)),
super(key: key);
void _resolveImage() {
final PictureStream newStream = widget.pictureProvider
.resolve(createLocalPictureConfiguration(context));
assert(newStream ! = null);
_updateSourceStream(newStream);
}
// in PictureProvider<T>.resolve
stream.setCompleter(
_cache.putIfAbsent(
key,
() => load(key, onError: onError),
),
);

Obtain the Rasterization Duration

Additional Information

Android VectorDrawable

Optimization of Bitmap Caching for Individual SVG Files

Summary

Original Source:

--

--

--

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Meet Our Alibaba Cloud Academy Alumni: Alberto Roura

Best Practices for Data Migration from MaxCompute to HybridDB for PostgreSQL

Virtual Backgrounds from GIPHY Studios

Learning Programming as a Laboratory Scientist

Dpath Traffic Isolation Solution for New Retail

The Prototype design pattern

Investigating Machine Learning Techniques to Improve Spec Tests — II

Deploying Your First PHP Application to Kubernetes Using Cloud Foundry

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com

More from Medium

Running integration tests as part of MRs for Add-to-App flutter apps

Bitrise Configuration for flutter IOS CI/Cd pipeline for Firebase and Appstore

How to Setup CI/CD for Flutter Apps using Github Actions

Using Huawei Cloud Functions as Chatbot Service in Flutter ChatBotApp Part-2