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.
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