У меня проблема с добавлением изображения в проект флаттера

Question

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

Я добавил нужные ресурсы в файл pubspec.yaml, и файлы находятся в папке.

Я попытался перезапустить мой ide и очистить его. Не было никаких изменений вообще.

class _homePageState extends State<homePage> {
  @override
  Widget build(BuildContext context) {
    var textStyle = TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                    fontWeight: FontWeight.w100,
                );

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: "MontSerrat"
      ),

      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.grey[400],
          title: Text("Germain Leignel",
            style: TextStyle(
              color: Colors.black,
              fontSize: 40,
              fontWeight: FontWeight.w100,
            ),
          )
        ),
        body: 
        Container(
          color: Colors.grey[400],
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset('assets/images/first_image.jpg')
            ],
          ),
        )
      ),
    );
  }
}

pubspec.yaml выглядит так:

name: epq_webapp
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
  pedantic: ^1.0.0

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

flutter:
  fonts:
  - family: MontSerrat
    fonts:
      - asset: assets\fonts\montserrat\Montserrat-Regular.ttf

  assets:
    - assets/
    - assets/images/first_image.jpg

Я ожидаю, что мой код отобразит изображение, однако я получаю сообщение об ошибке,

Невозможно загрузить ресурс: assets / images / first_image.jpg

Answer 1

обновить ваш pubspec.yaml с этим

`

  fonts:
  - family: MontSerrat
    fonts:
      - asset: assets\fonts\montserrat\Montserrat-Regular.ttf

  uses-material-design: true <--- line added ---
  assets:
    - assets/
    - assets/images/first_image.jpg

Вы также можете проверить это это может помочь вам

Answer 2

Я решил свою проблему, поместив ресурсы в веб-папку вместо корня проекта. затем использовал

Image.asset(filename)

чтобы отобразить их.

Answer 3

Flutter использует файл pubspec.yaml, расположенный в корне вашего проекта, для определения ресурсов, необходимых для приложения.

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

убедитесь, что ваше изображение находится в каталоге ресурсов

затем

Widget build(BuildContext context) {
  // ...
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/background.png'),
        // ...
      ),
      // ...
    ),
  );
  // 
}

Вы должны получить изображение, отображаемое