Im a complete beginner with Flutter and wanted to learn how to display a simple SVG image.
So I installed the flutter_svg: ^2.0.7 package and put it in the pubspec.yaml file.
I put my SVG in the pubspec.yaml file under the correct path and imported the package in main.dart.
Everything works. The Container is displayed in the center and scales itself to the size of the SVG even when I change it, but the SVG itself is invisible.
- I checked the SVG file to see if it’s broken, but it’s fine.
- I checked if I wrote the wrong path in the code or in pubspec.yaml but it is correct.
- I checked if the SVG has the same backround color as the container, but this is not the issue.
- I tried using my phone and the emulator to test the code, in order to see if the issue is with the device I’m testing on, but this is not the case.
I wrote this code to test if the SVG is displayable:
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() => runApp(MaterialApp(home: Test()));
class Test extends StatelessWidget {
const Test({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Training with Flutter'),
backgroundColor: Colors.green,
),
body: Center(
child: Container(
color: Color(0xff141414),
child: SvgPicture.asset("assets/images/turquoise_logo.svg",
width: 88, height: 181),
),
));
}
}
This is the pubspec.yaml file:
name: training
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 0.0.1+1
environment:
sdk: '>=2.19.4 <4.0.0'
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
flutter_svg: ^2.0.7
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
assets:
- assets/images/turquoise_logo.svg
2
Answers
Apparently, it was a cache problem. I ran "flutter clean" in the terminal of my project, and then it finally worked. But before I did that I updated my entire software. I don't know if this was a part of the solution, but it worked afterwarts.
The flutter_svg package can’t display some SVG files. You may be doing everything correct, but your SVG file may not be compatible with that plugin. I’ve used a utility called SVG Cleaner in the past to make my SVG file compatible. I’d try testing your code with some simple SVG files to determine if there is something wrong with your code or with the SVG file.