CODEWITHSUNDEEP
imageflutter
Bisclavret
Bisclavret

Reputation: 1331

Flutter will not display asset image

Pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - lib/images/
    - lib/images/app_logo.png

Main.dart

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          color: Colors.blueAccent,
          image: DecorationImage(
            image: ExactAssetImage('lib/images/app_logo.png'),
            fit: BoxFit.cover,
          ), //DecorationImage
        ), //BoxDecoration
      ),//Container
    ); //Scaffold
  }

No errors in app at all, just will not display anything. Have never seen this before. Have tried all manner of different indentations in pubspec. Have tried removing space between - and lib/images and replaced with tab.

What gives?

Upvotes: 2

Views: 5332

Answers (3)

Jon Wilson
Jon Wilson

Reputation: 1

I've had an issue with this same thing except my app kept displaying an older version of an asset image with the same name (I edited the image). I spent way too long trying to figure out what was wrong including, but not limited to, things such as flutter clean, wiping user data from my vm, renaming, etc. The renaming worked, which gave me a clue that it might be in the asset image cache itself not updating (as in: only creates new data when a new name is mapped). Finally, I CTRL-B into AssetImage which brought me into the image_resolution.dart file. After reading some of the code, I noticed it had a String constant with the filename of "AssetManifest.json". I did a search in the app directory of that file and came up with two locations.

...(your app)\build\app\intermediates\merged_assets\debug\out\flutter_assets

and

...(your app)\build\app\intermediates\flutter\debug\flutter_assets

In those two directories, you'll notice several files and directories. I made the AssetManifest.json into a .bak file to see if it got replaced on restart. It did, but still without results. So I backed up all the files in those two folders, then deleted them so that the folders were empty. When I restarted the app, the folders repopulated and the edited version of that picture displayed.

MY SOLUTION: Delete the contents in both flutter_assets folders in the paths I showed (NOT your app's local assets folder), and restart the app.

My guess is that flutter only updates the image cache when a new name is mapped to it. So changing the actual file that the name refers to does nothing. It seems as though deleting the contents of both folders, not just the manifest, forces your project to rebuild not only the manifest, but also the cache itself and associating the original file name with the new version of that file.

Hope that helps!

EDIT: I did have to perform a flutter clean before deleting the files. I also wiped the user data from the AVD just for good measure.

Upvotes: -1

Sundaravel M
Sundaravel M

Reputation: 246

Code is working perfectly, even inside lib folder. Let me share my code

Here is my pubspec.yaml code

name: nav
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.1.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:
    - lib/images/
    - lib/images/app_logo.jpg

my main.dart code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp( home: Scaffold(
      appBar: AppBar(),
      body: Container(
        height: 200,
        decoration: BoxDecoration(
          color: Colors.blueAccent,
          image: DecorationImage(
            image: ExactAssetImage('lib/images/app_logo.jpg'),
            fit: BoxFit.cover,
          ), //DecorationImage
        ), //BoxDecoration
      ),//Container
    )); //Scaffold
  }
}

The solution you may try:

  1. Try to restart your app from the beginning (not by Shift + R)
  2. Make sure, you have given proper spacing & file name extensions correctly

Upvotes: 4

Abbas.M
Abbas.M

Reputation: 3384

Try removing the image from lib, put the image instead in a new folder called images (on same level of lib file) change your pubspec.yaml to: 

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

and in your code 

image: ExactAssetImage('images/app_logo.png'),

I have tried this and it worked perfectly.

Upvotes: 1

Related Questions