Flutter Agency Official

How to Render SVG In Flutter?

Ruben Gray's photo
Ruben Gray
·

2 min read

How to Render SVG In Flutter?

Hope you are doing well with Flutter !!!

Earlier we have gone through How to use Image Widget in Flutter. So this is time for something related to that. In this article, we will go through How to Render SVG in Flutter.

How to Render SVG in Flutter?

There is a plugin available for the same. Users can give a try to flutter_svg. Users need to add dependencies from the below code snippet.

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: 0.19.0

Now the user needs to import like below:

import 'package:flutter_svg/flutter_svg.dart';

Now use it like a below:

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

User can follow the below steps:

  • Visit fluttericon.com
  • Upload your SVG icons
  • Click on the download button

  • The user will get two files

  • iconname.dart

  • iconname.ttf font file

Use this file in the Flutter & import iconname.dart

Example

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

class SvgExample extends StatelessWidget {
  const SvgExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("Show Svg Image"),
      ),
      body:Center(
        child: SvgPicture.asset(
                'assets/img.svg',
              ),
      ) ,
    );
  }
}

Output

Render SVG In Flutter

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Flutter