Загрузка AssetImages с Flutter

Question

Я пытаюсь определить некоторые ресурсы для своего приложения Flutter.

Это моя структура каталогов:

- lib
- assets
 - images
   └ bg_login.png <-- this one is 400x800px
   └ 2.0x
     └ bg_login.png <-- this one is 800x1600px.
- test
- ios
- android
- build
- pubspec.yaml

Это мой файл pubspec (с отступом в 2 пробела):

name: my_app
description: My App

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  assets:
    - assets/images/bg_login.png

Я загружаю изображение так:

new Positioned( 
  top: 0.0,
  width: MediaQuery.of(context).size.width,
  child: Image.asset(
    "assets/images/bg_login.png",
    fit: BoxFit.fitWidth,
  )
)

Иногда изображение загружается, иногда происходит сбой с этой ошибкой:

Launching lib\main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
Running 'gradlew assembleDebug'...
Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...
Syncing files to device Android SDK built for x86...
D/        ( 3460): HostConnection::get() New Host Connection established 0xb099df40, tid 3479
D/EGL_emulation( 3460): eglMakeCurrent: 0xa325a620: ver 2 0 (tinfo 0xb0983620)
I/flutter ( 3460): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 3460): The following assertion was thrown resolving an image codec:
I/flutter ( 3460): Unable to load asset: assets/images/bg_login.png
I/flutter ( 3460): 
I/flutter ( 3460): When the exception was thrown, this was the stack:
I/flutter ( 3460): #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
I/flutter ( 3460): <asynchronous suspension>
I/flutter ( 3460): #1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:427:44)
I/flutter ( 3460): <asynchronous suspension>
I/flutter ( 3460): #2      AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:412:14)
I/flutter ( 3460): #3      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:266:86)
I/flutter ( 3460): #4      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
I/flutter ( 3460): #5      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:266:63)
I/flutter ( 3460): (elided 8 frames from package dart:async)
I/flutter ( 3460): 
I/flutter ( 3460): Image provider: AssetImage(bundle: PlatformAssetBundle#267c3(), name: "assets/images/bg_login.png")
I/flutter ( 3460): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#267c3(), name: "assets/images/bg_login.png",
I/flutter ( 3460): scale: 1.0)
I/flutter ( 3460): ════════════════════════════════════════════════════════════════════════════════════════════════════

Это действительно происходит случайно,иногда это работает, в большинстве случаев выдает эту ошибку.Я также пытался с ImageAsset, я получил ту же ошибку.

Что происходит?Я что-то упустил, как правильно объявить и загрузить изображения?

Answer 1

В вашем pubspec.yaml вы можете объявить

flutter:
  assets:
    - assets/images

и по-прежнему использовать структуру каталогов ваших активов.

Flutter использует варианты активов при выборе разрешения для соответствующих изображений.

Таким образом, предполагается, что вы bg_login.png в папке изображений будете в нормальном масштабе и для разныхТип масштаба у вас может быть структура, такая как:

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

, где M и N - числовые идентификаторы, которые соответствуют номинальному разрешению изображений, содержащихся внутри, другими словами, они задают пиксель устройства.соотношение, для которого предназначены изображения.

Вы по-прежнему можете позвонить с кодом Image.asset("assets/images/bg_login.png").
Для справки Активы и изображения с Flutter.io

Answer 2

создайте структуру каталогов следующим образом: https://i.stack.imgur.com/KChTo.png

и добавьте pubspec.yaml

 assets:
- images/testImage.png
- images/2.0x/testImage.png
- images/3.0x/testImage.png

Вы можете ссылаться на эту ссылку https://flutter.dev/docs/development/ui/assets-and-images