Search code examples
androidflutterassets

How to fix: Image background doesn't show up on physical device in Flutter


I'm learning Flutter and I want to display a background image in my app but it's not showing up on the physical device.

I added an image background to the application. It's showing up on Android emulator. But when I use a physical device then there is no image (only white background).

I tried flutter clean, flutter pub get and then flutter build apk --release to create APK file. Then I installed this on the device.

I also tried to use a device with the debugging (debug console doesn't show any errors or warnings).

In both cases, I have a white background.

My pubspec.yaml file:

flutter:
  assets:
    - assets/images/background.jpg

MyHomePageState class where I use this image:

...
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/background.jpg'),
                fit: BoxFit.contain,
              ),
...

The output of the flutter doctor -v command:

[√] Flutter (Channel stable, v1.7.8+hotfix.3, on Microsoft Windows [Version 10.0.18362.239], locale en-US)
    • Flutter version 1.7.8+hotfix.3 at C:\AndroidFlutter\flutter
    • Framework revision b712a172f9 (3 weeks ago), 2019-07-09 13:14:38 -0700
    • Engine revision 54ad777fd2
    • Dart version 2.4.0


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\AndroidFlutter
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = C:\AndroidFlutter
    • ANDROID_SDK_ROOT = C:\Program Files (x86)\Android\android-sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[!] Android Studio (version 3.4)
    • Android Studio at C:\Program Files\Android\Android Studio
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[√] VS Code (version 1.36.1)
    • VS Code at C:\Users\Cyber\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.2.0

[√] Connected device (1 available)
    • LG V500 • LGV500d21491fe • android-arm • Android 7.1.2 (API 25)

Here is my repository.

I expected the screen to look like this (and this is from Android emulator):

enter image description here

but instead, I have a white background (all controls are rendered properly.


Solution

  • Ok, I managed to solve my problem.

    There are steps that helped me:

    1. Delete local repository.
    2. Clone repository from GitHub.
    3. Run flutter upgrade command to have the newest version of the Flutter framework.
    4. Run flutter run command to run the application on the connected physical device.