Question 231120 in Mysql Question posted in
The official MySQL documentation can be found here.

Mysql – how to show image in listview builder from database

please help me I want to show image in listview constructor, image name i stored in database. My image file is stored in Folders Pictures. I retrieve the image to display in the listview builder but the image is not displayed. It seems the code cannot find the image file I have stored in Folders Pictures. What do I need to fix to get the image to show?
enter image description here

class _view_problemState extends State<view_problem> {
  TextEditingController _searchController = TextEditingController();

  List<problemModel> problemlist = [];
  List<problemModel> originalList = [];
  StreamController _streamController = StreamController();
  Future getAllProblem() async {
    problemlist = await problemcontrollers().getProblem();
    originalList = problemlist;
    _streamController.sink.add(problemlist);
  }
Expanded(
              child: StreamBuilder(
                stream: _streamController.stream,
                builder: (context, snapshots) {
                  if (snapshots.hasData) {
                    return ListView.builder(
                        itemCount: problemlist.length,
                        itemBuilder: ((context, index) {
                          problemModel problem = problemlist[index];
                          return Card(
                            margin: EdgeInsets.all(10),
                            child: ListTile(
                              leading: Image.network(
                                problem.image,
                                height: 55,
                                width: 55,
                              ),
                                title: Text(
                                problem.name_surname,
                                style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 19),
                              ),
Tags:

2

Answers


  1. 0

    1. Place your images in assets folder

    2. Then make changes in pubspec.yaml file to access the images from the assets folder like this.

      assets:
  - 'assets/'

    3. Then where you want to display the image

      StreamBuilder(
         stream: _streamController.stream,
         builder: (context, snapshots) {
           if (snapshots.hasData) {
             return ListView.builder(
                 itemCount: problemlist.length,
                 itemBuilder: ((context, index) {
                   problemModel problem = problemlist[index];
                   return Card(
                     margin: EdgeInsets.all(10),
                     child: ListTile(
                       leading: Image.network(
                         "assets/" + problem.image,
                         height: 55,
                         width: 55,
                       ),
                         title: Text(
                         problem.name_surname,
                         style: TextStyle(
                             fontWeight: FontWeight.bold, fontSize: 19),
                       ),

    now you will be able to display image like this

    Login or Signup to reply.
  2. 0

    I think you want to display images from your api data. So you have to try Image.network in this way.

    Image.network(
  problem.image,
  width: 55,
  height: 55,
  fit: BoxFit.cover,
  loadingBuilder: (BuildContext context, Widget child,
    ImageChunkEvent? loadingProgress) {
      if (loadingProgress == null) return child;
        return Center(
          child: CupertinoActivityIndicator(),
        );
    },
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search