Error when loading an image with svg extension (Flutter-Dart): Failed to detect image file format using the file header – Invalid image data.

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

When trying to display an image with the svg extension, I encountered the following error:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("WELCOME to DevCodeLight"),
            Container(
                width: 200.0,
                height: 200.0,
                child: Image.asset('lib/images/android/splahs_android.svg')),
          ],
        ),
      ),
    );
  }

I solved it by adding the flutter_svg package

In the pubspec.yaml file, you need to add the path for the image you want to display as shown below:

In the project, add a folder named “images” inside “lib,” and within that folder, create another folder named “android” which should contain the image with the svg extension.

To display the image within a Dart view, add the following code inside the corresponding Widget:

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body:   Center(
        child:Column(
          mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("WELCOME to DevCodeLight"),
          Container(
            width: 200.0,
            height:200.0,
child:SvgPicture.asset('lib/images/android/splahs_android.svg')
),
markdown
Copy code
    ],

  ),
  ),
);
}

And the result is as follows:

I hope this helps you

Have a great day

Post Views: 13

Leave a Comment