skip to Main Content

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


  1. Chosen as BEST ANSWER

    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.


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search