Unable to Load Asset (flutter in android studio)

Question

So my ball images are showing up on my emulator but not my magic.jpg that I added myself. My pubspec.yaml is fine. I know. Does anyone know what's wrong? my folder tree

pubspec.yaml file:

name: magic_8_ball
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - assets/images/magic.jpg

my code:

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

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: BallPage(),
      ),
    );

class BallPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
        title: Text('Ask Me Anything'),
      ),
      body: Stack(children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/magic"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Ball()
      ]),
    );
  }
}

class Ball extends StatefulWidget {
  @override
  _BallState createState() => _BallState();
}

class _BallState extends State<Ball> {
  int ballNum = 1;

  @override
  Widget build(BuildContext context) {
    return Center(
        child: FlatButton(
            onPressed: () {
              setState(() {
                ballNum = Random().nextInt(5) + 1;
              });
            },
            child: Image.asset('assets/images/ball$ballNum.png')));
  }
}

error log:

I/flutter (22530): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter (22530): The following assertion was thrown resolving an image codec:
I/flutter (22530): Unable to load asset: assets/images/magic
I/flutter (22530): 
I/flutter (22530): When the exception was thrown, this was the stack:
I/flutter (22530): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter (22530): <asynchronous suspension>
I/flutter (22530): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:464:44)
I/flutter (22530): <asynchronous suspension>
I/flutter (22530): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:449:14)
I/flutter (22530): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:316:48)
I/flutter (22530): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
I/flutter (22530): #5      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:316:25)
I/flutter (22530): (elided 13 frames from package dart:async)
I/flutter (22530): 
I/flutter (22530): Image provider: AssetImage(bundle: null, name: "assets/images/magic")
I/flutter (22530): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#77a87(), name: "assets/images/magic",
I/flutter (22530):   scale: 1.0)
I/flutter (22530): ════════════════════════════════════════════════════════════════════════════════════════════════════

Thanks a bunch!! what my app looks like (as you can see, any ball image can show up, but not my background image, which I called magic.jpg

Solution

You didn't put the extension for the image magic in the widget AssetImage.

Simply, put it like this AssetImage("assets/images/magic.jpg") and it should work fine.

Comments

[Nolence]

It looks like you forgot to add the file extension ".jpg" to the end of of this line's file location: image: AssetImage("assets/images/magic"). I.e., "assets/images/magic.jpg"

[leelo]

yup! That did it. Thanks!