skip to Main Content

This my code and I can call the name and the nick by

 title: Text("${recipe[i]['name']}"),
 subtitle: Text("${recipe[i]['nick']}"),

So how I can call the image

List recipe = [
  {
    "name" : "bruce wayne",
    "nick" : "batman",
    "image" : Image.asset('lib/icons/pizza.png'),

  },
  {
    "name" : "clark kent",
    "nick" : "superman",
    "image" : Image.asset('lib/icons/sushi.jpg'),

  },
  {
    "name" : "peter parker",
    "nick" : "spiderman",
    "image" : Image.asset('lib/icons/kiwi.png'),

  },
  {
    "name" : "bruce banner",
    "nick" : "hulk",
    "image" : Image.asset('lib/icons/macNcheese.png'),

  },
];

I tried

leading: CircleAvatar(backgroundImage: AssetImage('lib/icons/takis.png'),

but it only gives me one photo and I am expecting to have a loop of images.

2

Answers


  1. You can access the image by: recipe[i]['image'], a widget on its own already and can stand alone. However, to use in a circle avatar, follow the below:

    CircleAvatar(child: recipe[i]['image']),
    

    You should be able to customize the CircleAvatar to suit your use case.

    Login or Signup to reply.
  2. You have to make changes to the list.
    You should use string instead of image.asset in the image field.

    for example:

    List recipe = [ { "name" : "bruce wayne", "nick" : "batman", "image" :'lib/icons/pizza.png'}];
            
            ListView.builder(
                        itemCount: recipe.length,
                        itemBuilder: (ctx, index) {
                          return ListTile(
                            title: Text(recipe[index]['name']),
                            subtitle: Text(recipe[index]['nick']),
                            leading: CircleAvatar(
                              backgroundImage: AssetImage(recipe[index]['image']),
                            ),
                          );
                        }),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search