Images
Sprout should show a small photo of each plant: a fern, a cactus, a snake plant. Those pictures ship inside the app, so they work offline. Flutter only bundles files you name in pubspec.yaml; anything else in the project folder is left out of the build.
The rule
Declare it in pubspec, then load it by the same path.
flutter:
uses-material-design: true
assets:
- assets/images/
- assets/images/plants/Image.asset('assets/images/plants/fern.png', width: 64, height: 64)- Paths are relative to the project root, and the one in
Image.assetmust match the file exactly, including case. - Listing a folder (ending in
/) includes every file directly inside it, but not its subfolders. Each subfolder needs its own line. - YAML is strict about indentation:
assets:sits underflutter:, and each entry is a dash one level deeper. - After editing
pubspec.yaml, stop and rerun the app. A hot reload does not pick up new asset entries.
Sharper images on dense screens. Add higher-resolution copies in folders named by pixel ratio:
assets/images/plants/fern.png (1x)
assets/images/plants/2.0x/fern.png
assets/images/plants/3.0x/fern.pngKeep loading 'assets/images/plants/fern.png'. On a phone with a 3x screen, Flutter picks the 3.0x copy automatically.
Images from the internet use Image.network(url) instead, and need no pubspec entry, but they need a connection.
The shortcut
When an image will not show, walk the path from file to pubspec to code, and stop at the first mismatch.
File
Is it really at
assets/images/plants/cactus.png? Check spelling and case:Cactus.PNGis a different file.
The trap is assuming a folder entry covers everything beneath it. It covers one level only.
Drills
Answer fast — trust the rule.
pubspec.yaml lists - assets/images/. Is assets/images/plants/fern.png bundled?
Which widget shows a picture bundled with the app?
You add a new assets entry to pubspec.yaml while the app runs. What next?
A 2x phone loads 'assets/images/plants/fern.png' and a 2.0x/fern.png exists beside it. Which file is used?
Remember
- Declare it in pubspec, then load it by the same path.
- Debug from file to pubspec to code, then restart.
- Trap: a folder entry does not include its subfolders.