Flutter Using SVGs - For Beginners

SVG means scalable vector graphics which means it is not raster. When you increase or decrease the size of the image or zoom a particular image your image will not get pixelated.

That’s why it is easy to add perceived value to your app by using SVGs inside the flutter app.

Configure Flutter Project

Let’s see how you can use SVGs by using the flutter_svg package.

First, you need an SVG file. For that, you can go to this link

https://freesvg.org/perplexed-male-9

And download this public domain SVG file. If you already have an SVG that’s fine too.

Now rename the downloaded file to codewithhussain.svg

Now go to your flutter project and create an assets file inside the main directory. Inside the assets directory, create an svg folder and past the svg file inside this directory.

Now we have this relative path to the SVG file.

assets/svg/codewithhussain.svg

Add Assets inside the pupspec.yaml

It’s time to add the SVG file inside the pubspec.yaml file.

  assets:
    - assets/svg/codewithhussain.svg

It’s time to use this file inside our app.

Create a sample screen.

Code:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('CodewithHussain'),
      ),
      body: const Text('Using Svgs'),
    );
  }
}

Now inside the body of the Scaffold, we use the SVG.

Flutter SVGs by using the flutter_svg Package

Now, it’s time to use the flutter_svg package.

Install the flutter_svg Package by running this command in the terminal or command prompt.

flutter pub add flutter_svg

Or you can add the dependencies

dependencies:
  flutter_svg: ^1.1.0

Let’s import the package inside the UI.

import 'package:flutter_svg/flutter_svg.dart';

Now

You can use SvgPicture.asset() inside the app.

SvgPicture.asset('assets/svg/codewithhussain.svg')

Full Code:

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('CodewithHussain'),
      ),
      body: SvgPicture.asset('assets/svg/codewithhussain.svg'),
    );
  }
}

Preview:

How to use SVG in LFlutter — Using SVG in Flutter

Flutter SVG package has differently named constructors.

SvgPicture.asset(assetName)	It is used to add SVG from the assets file
SvgPicture.file(file)	It is used to add SVG from the file
SvgPicture.memory(bytes)	It is used to add SVG from the memory
SvgPicture.network(url)	It is used to add SVG from the network URL
SvgPicture.string(string)	It is used to add SVG in form of String

Conclusion:

You explore how you can add SVG files in flutter using the flutter_svg package. You learn about different sources from where you can add SVGs in Flutter.

Hope this Flutter tutorial was helpful. Thanks!