How to use SVG in Flutter

Question

I'm currently in the process of integrating a map into my app, which should highlight individual components in color. I use this map (https://simplemaps.com/resources/svg-de), which is already available in a well-designed SVG file. I am now trying to color the individual SVG paths using Flutter Code. I am building on the svg_path_parser package (https://pub.dev/packages/svg_path_parser) and have used the corresponding example. But I am unable to replace the paths from the example with those from my SVG file. This may be due to the fact that my SVG paths are significantly longer than the ones given in the example. I would be very grateful if you would give me a little help or a suggestion for a better approach.

Solution

step 1.add dependency in your pubspec.yaml

dependencies: flutter_svg: any

step 2.import the flutter svg package in your app

 import 'package:flutter_svg/flutter_svg.dart';

step 3. just use like below

 SvgPicture.asset(
    'assets/images/bm-icon1.svg',
     width: 18.0,
     height: 18.0,
  ),

Comments

[NduJay]

Have you tried pub.dev/packages/flutter_svg?

[pskink]

so what does parseSvgPath return? a null?

[heyho123]

@NduJay Yes I looked at that, but unfortunately found no way to address the components individually using this package. But if you have any hint how to do so with this package I am happy to hear

[heyho123]

@pskink Yes the parseSvgPath returns null.

[pskink]

i just got some random lands and it works just fine: paste.ubuntu.com/p/ChRsyB9H3X - the original class shows a world map, hence a class name WorldMap

[heyho123]

@pskink Thank you for your help. I started with a different approach, but your approach works much better.

[pskink]

sure, your welcome, i hope you know how to change the code to show your map ;-)

[heyho123]

I hope I will try to look at everything very carefully now