CODEWITHSUNDEEP
androidfluttervisual-studiodart
Brilosan8
Brilosan8

Reputation: 33

I can't display images in my apk release in flutter

I have created an app in flutter and when I test it on my mobile it does not show any image. Everything is fine, except the images.

I attach a picture of the pubspec.yaml, as I have the structure of assets and the cmd of how I create the apk. Each name in the images is a folder in which there are images inside.

I clarify that in Visual Studio Code that is where I have done it, in its emulator if the images are shown, but when I install the apk, no.

It is curious that if I add - assets/images/Atreus/ , when creating the apk, this weighs more (as it weighs more for that folder I added), but still not shown.

Thanks.

pubspec.yaml

structure assets

cmd

ADD: I have already fixed the red warning. It creates the apk without those warnings (I updated jdk to 15 and gradle to version 7.0.2), but the images are still not visible.

build apk

Code image:

 Image.asset(
   'images/Kratos/kr2.jpg',
   width: 100,
   height: 100,
   fit: BoxFit.cover,
 ),

Code image updated:

Code image:

 Image.asset(
   'assets/images/Kratos/kr2.jpg',
   width: 100,
   height: 100,
   fit: BoxFit.cover,
 ),

NEW: Now I get this error. I have version 1.5 on my computer but I don't know how to select it.

version error

Now, when I change the version manually in build.gradle ext.kotlin_version = '1.5' I get this error, and even if I do flutter clean again it doesn't fix the problem.

build failed

Ok. Beginner's mistake. I put the version '1.5' but I should have put '1.5.0' ... Similarly, the apk is created without fail but the images are not displayed.

NEWS: Images are already shown! Many thanks to user2233706. I can't give points for being a "newbie" but I appreciate it very much.

Upvotes: 3

Views: 3630

Answers (3)

M. Rubio
M. Rubio

Reputation: 1

This answer will probably be helpful to only a few people, but I was absolutely desperate at the time and I would have loved to read this.

This is mainly if you have generated your Flutter code from Figma using DhiWise as of July 2023.

In web and android in debug mode everything works perfectly, but if you compile apk for release, everything will look weird: images or texts will not show (randomly), widgets seem out of place. I tried every possible solution in this and many other posts out there, but the problem was in fact in the code.

There is a functions file called "size_utils.dart" inside lib/core/utils.

Many of the widgets generated reference to this library directly or indirectly when giving size/margin/padding etc. In the end everything comes down to these two functions in that file:

double getVerticalSize(double px) {
  return ((px * height) / (FIGMA_DESIGN_HEIGHT - FIGMA_DESIGN_STATUS_BAR));
}

And

double getHorizontalSize(double px) {
  return ((px * width) / FIGMA_DESIGN_WIDTH);
}

These constants are declared in the beginning of the file, with a nice comment:

// Caution! If you think these are static values and are used to build a static UI,  you mustn’t.
// These are the Viewport values of your Figma Design.
// These are used in the code as a reference to create your UI Responsively.
const num FIGMA_DESIGN_WIDTH = 375;
const num FIGMA_DESIGN_HEIGHT = 812;
const num FIGMA_DESIGN_STATUS_BAR = 44;

Well. Don't pay attention to the comment and REMOVE THEM. In the two functions that reference them, just do:

double getHorizontalSize(double px) {
    return px;
}

double getVerticalSize(double px) {
  return px;
}

And that was it. Those numbers were changing the layout of your app and everything moved weirdly, not showing images, fonts and widgets properly. I don't understand why it did work in debug and not in release, but this will save you a day of starting the project from zero and copying widgets one by one and compiling.

Hope this helps!

Upvotes: 0

Shistastic
Shistastic

Reputation: 319

are you getting any error in your terminal like: "Image not found or similar", the first thing I saw from your image which isn't too clear is that when you establish your images path in the pubspec.yaml you must be very carefull with spacing, it seems to me that you added one space instead of 2 and dont forget to add every subdirectory in you're case you're missing to add the directory of "Kratos":

  assets:
    - assets/images/Kratos

So it would be like this:

[Space][Space]assets:
[Space][Space][Space][Space]-[Space]assets/images/Kratos

That should work wonders, hope I was able to give you any help.

Upvotes: 0

user2233706
user2233706

Reputation: 7207

Subdirectories within a directory are not automatically included. You need to include every directory in your pubspec.yaml. Not sure how things worked on the emulator without this. So you would have (according to your asset structure):

  assets:
    - assets/images/Antiguo
    - asests/images/Aparicion
    ...

Since the assets are within the assets/ folder, you also need to include that in your path:

Image.asset('assets/images/Kratos/kr1.jpg', ...);

Do a flutter clean and try building again.

Upvotes: 3

Related Questions