Question 213975 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Why are my images not showing on the screen?

I am creating a pageview of tree images that can be scrolled horizontally.

I’ve created a class that contains id, title, and path of trees and called the path of the images by putting it inside the AssetImage widget.

When I run the code the title shows up but the images are not showing on the screen.

Here’s the code that I am working on.

tree_model.dart

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'),
];

tree_design_page.dart

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

class TreeDesignPage extends StatefulWidget {
  const TreeDesignPage({
    super.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: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("treeModelList[index].path"),
                      ),
                    ),
                  ),
                ),
                Positioned(
                  left: 113.7,
                  top: 70,
                  child: SizedBox(
                    width: 184,
                    child: Text(
                      treeModelList[index].title,
                      textAlign: TextAlign.center,
                      style: const TextStyle(fontSize: 40),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

And here’s the file structure, pubspec.yaml, and the result of the emulator.

image

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search