Images not showing up in PageView with Flutter

I am creating a PageView to display tree images that can be scrolled horizontally. The PageView also includes the titles for each tree. However, while the titles are showing up correctly, the images are not being displayed on the screen.

I have a TreeModel class that contains id, title, and path of trees. I am using the path inside the AssetImage widget to display the images.

Here's the code for my TreeModel:

class TreeModel {
  final int id;
  final String title;
  final String path;

  TreeModel(this.id, this.title, this.path);
}

List<TreeModel> treeModelList = [
  TreeModel(1, 'Tree 1', 'images/tree_illust.png'),
  TreeModel(2, 'Tree 2', 'images/tree_illust2.png'),
  TreeModel(3, 'Tree 3', 'images/tree_illust3.png'),
  TreeModel(4, 'Tree 4', 'images/tree_illust4.png'),
];

And here's the code for my TreeDesignPage:

import 'package:app/models/tree_model.dart';
import 'package:flutter/material.dart';

class TreeDesignPage extends StatefulWidget {
  const TreeDesignPage({Key? key}) : super(key: key);

  @override
  State<TreeDesignPage> createState() => _TreeDesignPageState();
}

class _TreeDesignPageState extends State<TreeDesignPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/landscape1.jpg'), // the background image
            fit: BoxFit.cover,
          ),
        ),
        child: PageView.builder(
          itemCount: treeModelList.length,
          itemBuilder: (context, index) {
            return Stack(
              children: [
                InkWell(
                  onTap: () {
                    print("Clicked ${treeModelList[index].id}!");
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(treeModelList[index].path), // PROBLEM HERE?
                      ),
                    ),
                  ),
                ),
                Positioned(
                  left: 113.7,
                  top: 70,
                  child: SizedBox(
                    width: 184,
                    child: Text(
                      treeModelList[index].title,
                      textAlign: TextAlign.center,
                      style: const TextStyle(fontSize: 40),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

However, despite using the correct AssetImage path, the images are not showing up on the screen.

Here's the file structure:

- lib/
  - models/
    - tree_model.dart
  - tree_design_page.dart
- images/
  - landscape1.jpg
  - tree_illust.png
  - tree_illust2.png
  - tree_illust3.png
  - tree_illust4.png
- pubspec.yaml

I have included the relevant portion of my pubspec.yaml file to ensure the assets are correctly configured.

Could someone kindly review my code and help me identify the issue that's causing the images not to show up in the PageView? Any insights or suggestions to resolve this problem would be greatly appreciated. Thank you!

You have pass String in your Assets Image:

You need to pass only the path not the path as string. You should use treeModelList[index].path instead of the string literal "treeModelList[index].path".

Solution Code:

class TreeDesignPage extends StatefulWidget {
  const TreeDesignPage({
    Key? key,
  }) : super(key: key);

  @override
  State<TreeDesignPage> createState() => _TreeDesignPageState();
}

class _TreeDesignPageState extends State<TreeDesignPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/landscape1.jpg'), // The background image
            fit: BoxFit.cover,
          ),
        ),
        child: PageView.builder(
          itemCount: treeModelList.length,
          itemBuilder: (context, index) {
            return Stack(
              children: [
                InkWell(
                  onTap: () {
                    print("Clicked ${treeModelList[index].id}!");
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(treeModelList[index].path), // Updated image path
                      ),
                    ),
                  ),
                ),
                Positioned(
                  left: 113.7,
                  top: 70,
                  child: SizedBox(
                    width: 184,
                    child: Text(
                      treeModelList[index].title,
                      textAlign: TextAlign.center,
                      style: const TextStyle(fontSize: 40),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

Now you will show the image.

If image is not showing. Make sure that you have added assets/images on your pubspec.ymal file.

Instead of

image: AssetImage("treeModelList[index].path"),

use this:

image: AssetImage(treeModelList[index].path.toString()),

> note: .toString() is optional and is there, just to ensure that type casting.