Search code examples
flutterdartpackagepubspec

Flutter Custom Package (unable to load asset)


I've moved one of my widgets into its own custom package and everything works fine except that the image assets can't be displayed despite registering it in the pub spec.yaml file inside the custom component. Here is a simple example that shows the issue:

Folder structure (files are numbered):

.
├── lib
│   └── main.dart (1)
├── packages
│   └── showimage
│       ├── assets
│       │   └── images
│       │       └── photo.jpg
│       ├── lib
│       │   └── showimage.dart (3)
│       └── pubspec.yaml (4)
└── pubspec.yaml (2)

/* main.dart */

// (1)

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

void main() {
  runApp( MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ShowImage(),
  ));
}

# pubspec.yaml
# (2)

name: custom_widget
description: A new Flutter project.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.17.6 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  showimage:
    path: ./packages/showimage

flutter:
  uses-material-design: true

/* showimage.dart */
// (3)

library showimage;

import 'package:flutter/material.dart';

class ShowImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.fromLTRB(0, 100, 0, 0),
        child:  Center(
          child: SizedBox(
            width: 200,
            child: Image.asset('assets/images/photo.jpg')
          ),
        )
      )
    );
  }
}
# pubspec.yaml
# (4)
name: showimage
description: Displays a photo on the screen.
version: 1.0.0
publish_to: 'none'

environment:
  sdk: '>=2.17.6 <3.0.0'

dependencies: {flutter: {sdk: flutter}}

flutter:
  uses-material-design: true
  assets:
    - ./assets/images/

When the app is run I get the following displayed in the terminal:

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞═══════════════════════════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: assets/images/photo.jpg

When the exception was thrown, this was the stack:
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:237:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:658:14)
<asynchronous suspension>

Image provider: AssetImage(bundle: null, name: "assets/images/photo.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#a1e5a(), name: "assets/images/photo.jpg",
  scale: 1.0)
═══════════════════════════════════════════════════════════════════════════════════════

And the following displayed in the app (inside a red box crossed out):

Unable to load asset: assets/images/photo.jpg

The problem seems to be the image path but I've tried every variation I could think of.


Solution

  • In a package you can use only assetImage i believe.

    return const AssetImage('packages/fancy_backgrounds/backgrounds/background1.png');
    

    Or

    Image(image: AssetImage('packages/fancy_backgrounds/backgrounds/background1.png'));
    
    

    Check this link https://docs.flutter.dev/development/ui/assets-and-images