dart 我在我的flutter项目中看不到我的图像

myzjeezk  于 2023-01-06  发布在  Flutter
关注(0)|答案(3)|浏览(123)

我做了一个简单的pokedex应用程序尝试自己。我完成了我的项目,我没有得到任何问题的android工作室。另一方面,当我开始我的应用程序,我看不到图像,以获得我的项目在模拟器。有人能帮助我这个问题吗?
可以看看这个扩展名. https://github.com/AlejandroTaichu/Pokedex.git
我想看到我的项目中的图像时,我打开了我的项目。我是新的编程,所以我不能修复。

bt1cpqcv

bt1cpqcv1#

您忘记了代码中图像的扩展名

child: Image.asset("images/${pokemon.name}")),

更改为以下代码

child: Image.asset("images/${pokemon.name}.png")),

或在pokeList名称中添加图像扩展名(.png)

pw9qyyiw

pw9qyyiw2#

您需要根据资产图像路径更改图像名称(路径)包括图像类型。

接下来,需要创建一个Future,并在Future Builder小部件上调用future

late final future = callPokemon();
class _PokemonHomepageState extends State<PokemonHomepage> {
  Future<List<Pokemons>> callPokemon() async {
    var pokeList = <Pokemons>[];

    var p1 = Pokemons(pokeId: 1, name: "Charmender.png", health: 100, power: 250);
    var p2 = Pokemons(pokeId: 2, name: "squirtle.png", health: 150, power: 300);
    var p3 = Pokemons(pokeId: 3, name: "balbazar.png", health: 300, power: 500);

    pokeList.add(p1);
    pokeList.add(p2);
    pokeList.add(p3);

    return pokeList;
  }

  late final future = callPokemon();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
          AppBar(title: const Text("POKEDEX"), backgroundColor: Colors.green),
      body: FutureBuilder<List<Pokemons>>(
        future: future,
        builder: (context, snapshot) {

创建了一个pr on git,您可以合并它

3okqufwl

3okqufwl3#

我建议您对资产使用flutter_genhttps://pub.dev/packages/flutter_gen)。我最近发现这个包&当使用来自资产的多个图像时,它真的很有帮助。
使用flutter_gen,你可以一次性设置一些东西&你可以直接从这个包中获得图像小部件。
1.设置Flutter生成

dart pub global activate flutter_gen

1.在开发依赖项中添加这些runner

dev_dependencies:
  build_runner:
  flutter_gen_runner:

1.生成资产文件的设置路径

flutter_gen:
  output: lib/generated/

此步骤中有许多选项。您可以查看它们的文档。
1.设置图像文件夹路径

assets:
    - assets/images/

1.把你的图片放在添加的路径中
1.完成这些步骤后,您只需要运行

flutter packages pub run build_runner build

此文件将在lib/generated文件夹中生成一个资产文件名assets.gen.dart,如我们在步骤3中所做的设置。请注意,每当您更改文件夹名称或图像以重新生成assets.gen.dart时,都必须运行此命令
就是这样。
完成这些步骤后,可以直接从assets.gen.dart文件中获取图像,如下所示

import 'package:flutter_boilerplate/generated/assets.gen.dart';

Padding(
  padding: const EdgeInsets.all(20),
  child: SizedBox(
    height: 200, child: Assets.images.cat1.image(width: 200),
  ),
),

额外的好处是这些资产提供的小部件支持智能感知,所以没有拼写错误的机会。另外,你可以直接从这里得到一个小部件,它具有默认图像小部件的所有属性。它还支持高级图像类型,如svg,lottie,flare以及。

相关问题