Image.asset in a Widget

Question

I want to insert an image into my widget but always get an error in the console and I don't know what to do about it.

class Menue extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Color.fromRGBO(26, 26, 26, 100),
      body: new Container(
        child: new Center(
          child: new Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset("Q-Extreme Menue.png"),
                  new IconButton(onPressed: () {}, icon: new Icon(null),),

                ],
                ),
                ....

I/flutter ( 8295): The following assertion was thrown resolving an image codec: I/flutter ( 8295): Unable to load asset: Q-Extreme Menue.png I/flutter ( 8295): I/flutter ( 8295): When the exception was thrown, this was the stack: I/flutter ( 8295): #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7) I/flutter ( 8295): I/flutter ( 8295): #1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:464:44) I/flutter ( 8295): I/flutter ( 8295): #2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:449:14) I/flutter ( 8295): #3 ImageProvider.resolve... (package:flutter/src/painting/image_provider.dart:316:48) I/flutter ( 8295): #4 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22) I/flutter ( 8295): #5 ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:316:25) I/flutter ( 8295): (elided 13 frames from package dart:async) I/flutter ( 8295): I/flutter ( 82 95): Image provider: AssetImage(bundle: null, name: "Q-Extreme Menue.png") I/flutter ( 8295): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#88838(), name: "Q-Extreme Menue.png", I/flutter ( 8295): scale: 1.0)

flutter:



  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
assets:
  - assets/images/Q-Extreme Menue.png
  - Q-Extreme Menue.png

Answer 1

Put the image in a folder ( assets/images ) like as shown in the picture:

Then you can reference the asset in your pubspec.yaml (Be sure to remove the white spaces in the file name; you can call it Q_Extreme_Menue.png )

flutter:



  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
  assets:
    - assets/images/Q_Extreme_Menue.png

Now when using the asset, you provide the full path:

Image.asset('assets/images/Q_Extreme_Menue.png'),

Answer 2

I think you made mistake in indent spaces.

flutter:



  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
  assets:
    - assets/images/Q-Extreme Menue.png