Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Render/User SVG Vector Images in Flutter App

In this example, we are going to show you the easiest way to render or display SVG vector images from Asset folder and from Network. See the examples below for details:

First, you need to add flutter_svg Flutter package in your dependency by adding following lines in pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^0.22.0

Import Packge in Script:

import 'package:flutter_svg/svg.dart';

How to display SVG Vector from Asset Folder:

SvgPicture.asset(
  "assets/flag.svg", //asset location
  color: Colors.red, //svg color
  semanticsLabel: 'SVG From asset folder.'
)

How to display SVG Vector from Network:

SvgPicture.network(
  'https://www.svgrepo.com/download/33352/lock.svg',
  semanticsLabel: 'SVG From Network',
  placeholderBuilder: (BuildContext context) => Container(
      padding: const EdgeInsets.all(30.0),
      child: const CircularProgressIndicator()), //placeholder while downloading file.
)

How to Render SVG String to Vector Image:

final String rawSvg = '''<svg viewBox="...">...</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

// If you only want the final Picture output, just use
final Picture picture = svgRoot.toPicture();

// Otherwise, if you want to draw it to a canvas:
// Optional, but probably normally desirable: scale the canvas dimensions to
// the SVG's viewbox
svgRoot.scaleCanvasToViewBox(canvas);

// Optional, but probably normally desireable: ensure the SVG isn't rendered
// outside of the viewbox bounds
svgRoot.clipCanvasToViewBox(canvas);
svgRoot.draw(canvas, size);

How to Resize SVG Vector:

SizedBox(
  height:100, width:100,
  child:SvgPicture.asset(
    "assets/flag.svg", //asset location
    color: Colors.red, //svg color
    semanticsLabel: 'SVG From asset folder.'
  ),
)

Full Code Example:

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
     return Scaffold(
          appBar: AppBar(
             title: Text("Show SVG Vector from Asset/Network"),
          ),
          body: Container( 
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(20),
            child: Column(
                children:[

                    SizedBox(
                      height:100, width:100,
                      child:SvgPicture.asset(
                        "assets/flag.svg", //asset location
                        color: Colors.red, //svg color
                        semanticsLabel: 'SVG From asset folder.'
                      ),
                    ),

                    SizedBox( 
                      height: 100, width: 100,
                      child:SvgPicture.network(
                        'https://www.svgrepo.com/download/33352/lock.svg',
                        semanticsLabel: 'SVG From Network',
                        placeholderBuilder: (BuildContext context) => Container(
                            padding: const EdgeInsets.all(30.0),
                            child: const CircularProgressIndicator()), //placeholder while downloading file.
                      )
                    )

                ]
            ),
          ),
     );
  }
 
}

Output Screenshot:

In this way, you can render/display SVG vector from Asset Foler/Network or from String.

No any Comments on this Article


Please Wait...