image - 即使在pubspec.yaml Flutter中指定了 Assets ,也不会在GridView中显示图像

标签 image flutter dart

我现在正在开发一个菜单信息亭应用程序,在将图像加载到我的应用程序时遇到一些问题,我确保在pubspec.yaml中指定了每个图像,但是这些图像仍然没有显示。我得到的错误是这样的: ════════ Exception caught by image resource service ════════════════════════════ Unable to load asset: assets/images/sideDesserts/Dippers with Choco Dip.png ════════════════════════════════════════════════════════════════════════════════
这是我的pubspec.yaml包含的内容

# To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    - assets/images/sideNav/
    #pizza assets
    - assets/images/pizza/Hawaiian Overload.png
    - assets/images/pizza/Bacon Overload.png
    - assets/images/pizza/All In Overload.png
    - assets/images/pizza/All Beef Overload.png
    - assets/images/pizza/hamandCheese.png
    - assets/images/pizza/Peperroni Classic.png
    - assets/images/pizza/veggies_cheesedouble.png
    - assets/images/pizza/Ham Pineapple Classic.png
    - assets/images/pizza/Cheese Classic.png
    #barkada assets
    - assets/images/barkada/Barkada Bundle A.png
    - assets/images/barkada/Barkada Bundle B.png
    - assets/images/barkada/Barkada Bundle C.png

    #chicken assets        
    - assets/images/chicken/1pc Chicken with Rice.png
    - assets/images/chicken/2pc Chicken Meal with Rice.png
    - assets/images/chicken/Chicken Waves.png
    #combo assets
    - assets/images/combo/Carbonara Chicken Combo.png
    - assets/images/combo/Creamy Bacon Carbonara Value Meal.png
    - assets/images/combo/Lasagna Chicken Combo.png
    - assets/images/combo/Lasagna Supreme Value Meal.png
    - assets/images/combo/Meaty Spaghetti Chicken Combo.png
    - assets/images/combo/Meaty Spaghetti Value Meal.png
    - assets/images/combo/Pizza Value Meal A.png
    - assets/images/combo/Pizza Value Meal B.png
    - assets/images/combo/Pizza Value Meal C.png
    - assets/images/combo/Pizza Loaded Combo D.png
    - assets/images/combo/Pizza Loaded Combo E.png
    #drink assets
    - assets/images/drinks/Choco Slush.png
    - assets/images/drinks/coke pitcher.png    
    - assets/images/drinks/Coke Zero.png
    - assets/images/drinks/Coke.png    
    - assets/images/drinks/Coke Glass.png
    - assets/images/drinks/Ice Tea.png
    - assets/images/drinks/Nestea Glass.png
    - assets/images/drinks/Nestea Pitcher.png    
    - assets/images/drinks/PJ Pitcher.png
    - assets/images/drinks/Pj.png
    - assets/images/drinks/Sprite.png    
    #pasta assets
    - assets/images/pasta/Lasagna Supreme Ala Carte.png
    - assets/images/pasta/Meaty Spaghetti Ala Carte.png
    - assets/images/pasta/Creamy Bacon Carbonara Ala Carte.png
    - assets/images/pasta/Lasagna Supreme Large Pan.png
    - assets/images/pasta/Meaty Spaghetti Large Pan.png
    - assets/images/pasta/Creamy Bacon Carbonara Pan.png
    - assets/images/pasta/Lasagna Supreme Pan.png
    - assets/images/pasta/Meaty Spaghetti Regular Pan.png
    - assets/images/pasta/Creamy Bacon Carbonara Regular Pan.png

    #sides Desserts assets
    - assets/images/sideDesserts/Regular Potato Waves.png
    - assets/images/sideDesserts/Cheesy Bread Sticks with Dip.png
    - assets/images/sideDesserts/Dippers with Choco Dip.png
    - assets/images/sideDesserts/Large Potato Waves.png
    - assets/images/sideDesserts/Plain Rice.png                   

    #logos
    - assets/images/Logos/box Logo.png
    - assets/images/Logos/long logo.png

我还为不同的菜单类型创建了自定义静态列表模型,示例如下:
class BarkadaData {
  String name;
  String imagePath;
  double price;

  BarkadaData({this.imagePath, this.name, this.price});

  static List<BarkadaData> barkadaList = [
    BarkadaData(
        name: 'Barkada Bundle A (for 3)',
        price: 469.00,
        imagePath: 'assets/images/barkada/Barkada Bundle A.png'),
    BarkadaData(
        name: 'Barkada Bundle B (for 4)',
        price: 569.00,
        imagePath: 'assets/images/barkada/Barkada Bundle B.png'),
    BarkadaData(
        name: 'Barkada Bundle C (for 6)',
        price: 969.00,
        imagePath: 'assets/images/barkada/Barkada Bundle C.png'),
  ];
}

最后,我使用GridView.builder显示它,我的小部件树如下所示:
                      Container(
                        width: MediaQuery.of(context).size.width * .75,
                        child: GridView.builder(
                          itemCount: barkadaList.length,
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 3),
                          itemBuilder: (BuildContext context, int index) {
                            return InkWell(
                              onTap: () {
                                print(barkadaList[index].name);
                              },
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Stack(
                                  children: <Widget>[
                                    Container(
                                      width: MediaQuery.of(context).size.width *
                                          .22,
                                      child: Image(
                                        image: AssetImage(
                                            barkadaList[index].imagePath),
                                      ),
                                    ),
                                    Text(
                                      '${barkadaList[index].name}',
                                      style: TextStyle(
                                          fontWeight: FontWeight.w600,
                                          fontSize: 18),
                                      textAlign: TextAlign.center,
                                    )
                                  ],
                                ),
                              ),
                            );
                          },
                        ),
                      )

enter image description here

如您所见,gridview.builder之所以有效,是因为名称正在显示,只有图像没有显示。任何帮助,将不胜感激

最佳答案

重命名您的图片。您的图片名称有空格。在android图像中无法使用空间名称加载。因此,使用Choco Dip 将您的图像名称 Dippers重构为 Dippers_with_Choco_Dip

关于image - 即使在pubspec.yaml Flutter中指定了 Assets ,也不会在GridView中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59986333/

相关文章:

c++ - 使用at获取opencv中的像素值

css - 如何添加列表样式类型 : "disc" to <p> tag

html - 为所有浏览器设置带有背景图像的 HTML 表单样式

c# - WPF 位图到图像的转换仅显示黑色图像

flutter - 从 pubspec.yaml 检索应用程序的当前版本

flutter - 如何在我 flutter 的电子商务应用程序中添加货币转换器?

dart - dart构造函数中的默认值

dart - 如何在 Column 类中将小部件与顶部对齐?

flutter - 键盘弄乱了对话框

android - 禁止从SDK进行抖动测试