I want to show images in loop which are store in List widget but this are static data. like this:-
final List imgs = [
"assets/images/people.png",
"assets/images/people.png", "assets/images/people.png",
"assets/images/people.png",
"assets/images/people.png",
];

now I want to show this list with dynamic data and that's why I have an API that returns the images from the database. now I want to show that images in final List<String> imgs = [] widget. so how do I add the loop in this widget? please help me. In images, I store the image URL which comes from a database.
I want to show the images in the List widget

here is my code:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:io';
import 'package:mindmatch/utils/Auth.dart';
import 'package:http_parser/http_parser.dart';

class ProfileImages extends StatefulWidget {

ProfileImages({Key? key}) : super(key: key);

@override
_ProfileImages createState() => _ProfileImages();
}

class _ProfileImages extends State<ProfileImages>{

 var UsrID = Auth.prefs?.getString('usrid');
 var Imagedata;
 var Images = "";

 @override
  void initState() {
  super.initState();

  getImageData();

 }

 getImageData() async{
  var res = await http.get(Uri.https('www.*******.net', '/mm_api/index.php',{'act':'usrPhotos','UsrID': '${UsrID}'}));
  Imagedata = jsonDecode(res.body);
  //print(data);
  //print(usrpic);
  urls = "https://www.******.net/mm_api/files/profile/${Imagedata['image']}";

  setState(() {});
  print(res.body);
 }

 final List<String> imgs = [
  "assets/images/people.png",
  "assets/images/people.png",
  "assets/images/people.png",
  "assets/images/people.png",
  "assets/images/people.png",
];




@override
Widget build(BuildContext context) {


return
  Imagedata != null?GFItemsCarousel(
  rowCount: 3,
  //itemHeight: MediaQuery.of(context).size.height / 1.5,
  children: imgs.map(
        (url) {
      return Container(
        margin: EdgeInsets.all(5.0),
        child: Stack(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              child:
              ListView.builder(
              itemCount: urls.length,
              itemBuilder: (BuildContext context, int index) {
              return Image.network(urls[index]);
              },
              ),
            ),
            Positioned(
                top: 9,
                right: 9,
                child: SvgPicture.asset(
                  width: 30,
                  'assets/images/close.svg',
                  height: 30,
                ),
            )
          ],

        ),
      );
    },
  ).toList(),
): const Center(
    child: CircularProgressIndicator(),
);
}
}

at the Images variable, I store the full image URL from the database but how do I show this in List widget please help me with how I show these images in the loop.

here is my JSON data:-

[{"id":"8","image":"5e11b3c030f07b70ee982158bccff41f.jpeg"},{"id":"9","image":"158ad385dff9ec07a40d4401351de434.jpeg"},{"id":"10","image":"af8079a1832c0458b80ac17c865a840b.jpeg"}]

Please help with how I show these images.

CodePudding user response：

Extract images from response and added it to the imgs list .

  var res = await http.get(Uri.https('www.*******.net', '/mm_api/index.php',{'act':'usrPhotos','UsrID': '${UsrID}'}));
  Imagedata = jsonDecode(res.body);

  
  imgs.clear();
  ImagesData.forEach((e){
imgs.add(e.image);

})

 }```

Then after 

ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              child:

//append with baseURL
              Image.network(
             "https://www.*******.net/files/profile/"     url,
                fit: BoxFit.cover,
              ),
            ),

CodePudding user response：

use ListView.builder like this:

for asset images

ListView.builder(
  itemCount: img.length,
  itemBuilder: (BuildContext context, int index) {
  return new Image.asset(img[index], fit: BoxFit.cover);
 },
);

for images from network

 ListView.builder(
      itemCount: urls.length,
      itemBuilder: (BuildContext context, int index) {
        return Image.network(urls[index]);
      },
    );
  }

you can use cached_network_image to get an image from the network only once and then get it from the local cache

for your example after getting an images successfully from database merge them with imgs list

change getImageData to

 getImageData() async{
  var res = await http.get(Uri.https('www.*******.net', '/mm_api/index.php',{'act':'usrPhotos','UsrID': '${UsrID}'}));
  var jsonData = json.decode(res.body);
  var images = jsonData.map<String>((json) => json['image']).toList();
  
  setState(() {
     for(var img in images){
       imgs.add(img);
   }  
  });
 }

change build to

@override
Widget build(BuildContext context) {

  return Scaffold(
    appBar: AppBar(
      title: Text("Profile Images"),
    ),
    body: Container(
      child: ListView.builder(
        itemCount: imgs.length,
        itemBuilder: (context, index) {
          //check the image if it is asset or network 
          if(imgs[index].contains("assets")){
            return Container(
              margin: EdgeInsets.all(10),
              child: Image.asset(imgs[index]),
            );
          }else{
            return Container(
              margin: EdgeInsets.all(10),
              child: Image.network(imgs[index]),
            );
          }
        },
      ),
    ),
  );
}