Flutter problems with loading picture with SvgPicture.assets

Question

I am trying to load an image to my flutter app and for some resone I get an error that I dont know how to fix

this is my code:

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

class LogInPage extends StatefulWidget {
  const LogInPage({Key? key}) : super(key: key);

  @override
  _LogInPageState createState() => _LogInPageState();
}

class _LogInPageState extends State<LogInPage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    double viewInsert = MediaQuery.of(context).viewInsets.bottom;
    double defaultLoginSize = size.height - (size.height * 0.2);
    double defaultRegisterSize = size.height - (size.height * 0.1);

    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: SingleChildScrollView(
              child: Container(
                width: size.width,
                height: defaultLoginSize,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Welcome',
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 24),
                    ),
                    SizedBox(height: 40),
                    SvgPicture.asset('assets/Image1.png'), // this is where I am trying to load 
                                                              // the picture
                    SizedBox(height: 40),
                    Container(
                      margin: EdgeInsets.symmetric(vertical: 10),
                      padding:
                          EdgeInsets.symmetric(horizontal: 20, vertical: 5),
                      width: size.width,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

and this is the errors I get:

Exception caught by SVG
The following _Exception was thrown resolving a single-frame picture stream:
Exception: FormatException: Unexpected extension byte (at offset 0)
Picture provider: ExactAssetPicture(name: "assets/MyBarber3.png", bundle: null, colorFilter: >null)
Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#05902(), name:
"assets/MyBarber3.png", colorFilter: null) and this is my ymal file:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.4.0
  firebase_database: ^7.1.2
  firebase_auth: ^3.0.1
  cloud_firestore: ^2.4.0
  firebase_storage: ^10.0.1
  flutter_svg: ^0.22.0
  google_fonts: ^2.1.0
  cupertino_icons: ^1.0.2

assets:
  - assets/

Someone know how do I fix that?

Answer 1

Your code clearly showed that you are trying to load png in SvgPicture.asset function

SvgPicture.asset('assets/Image1.png'), // here

You can load your png image using

Image.asset('assets/Image1.png')  

Or

AssetImage('assets/Image1.png')

Otherwise place svg picture and it works fine.

Answer 2

SvgPicture takes svg files as input.

So makes sure that:

• Image's extension/type is Image1 .svg
• The image's path is correct.
• SvgPicture.asset('assets/Image1.svg')