how to show dynamic images in loop from database-CodePudding

I have some data from the database which I want to show in Image.network()

I have an empty List imgs = [];

and the URL variable which stores the image path from the network.

Please help me with how I show those images in a loop.

I have an API that returns the images from the database. now I want to show that images.

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 urls = "";



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

getImageData() async{
  //var res = await http.get(Uri(host: url));
var res = await http.get(Uri.https('www.*******.net', '/mm_api/index.php',{'act':'usrPhotos','Usrid': '${UsriD}'}));
Imagedata = jsonDecode(res.body);
print(Imagedata);
//print(usrpic);
urls = "https://www.*******.net/mm_api/files/profile/";
print(urls);
//setState(() {});
print(res.body);
}

List imgs=[ "", ];


@override
Widget build(BuildContext context) {

 print(getImageData());

 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 Imagedata[index]['image']);
              },
              ),
            ),
            Positioned(
                top: 9,
                right: 9,
                child: SvgPicture.asset(
                  width: 30,
                  'assets/images/close.svg',
                  height: 30,
                ),
            )
          ],

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

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：

Just Use Network Image

Enter the image object with endPoint means Url imageObject

CodePudding user response：

Maybe try List.generate ? It will show you so many images as you have in image list

For example:

Row(
  children: List.generate(
    imgs.length,
    (index) => NetworkImage(imgs[index]),
  ),
)