This is the list of images i am getting from api response. How can i display this in UI

You can get postUrl as String. Hope you have done that stuff by getting this response.

First of all, you have to remove the brackets from [ & ] from a whole string.

Now you can split that String by '@ ' so you will get 3 URLs and you can show them one by one.

Here how to split the string:

final postUrls = 'yourURLs';
final split = tagName.split('@ ');
final Map<int, String> values = {
  for (int i = 0; i < split.length; i++)
    i: split[i]
};
print(values);  // {0: url1, 1: url2, 2: url3}

final url1 = values[0];
final url2 = values[1];
final url3 = values[2];

print(url1);  // URL1
print(url2);  //  URL2
print(url3);  // URL3

Try it out and do let me know if you get any problems.

Hi please do follow the below blog for your reference. https://protocoderspoint.com/read-json-file-assets-flutter-display-data-listview/ Steps to be followed:

1. Creation of PODO class to deserialize the json data to dart object and data type.
2. And use the extracted data to build a UI using the ListView.Builder widget or any widget builder of your choice.

Please look at this widget. I have made a local json file and made the data available please replace those local file read with your http call.

class ImageBuilderSample extends StatefulWidget {
  const ImageBuilderSample({Key? key}) : super(key: key);

  @override
  State<ImageBuilderSample> createState() => _ImageBuilderSampleState();
}

class _ImageBuilderSampleState extends State<ImageBuilderSample> {
  List<String> _images = [];
  Future<void> readJson() async {
    final String response =
        await rootBundle.loadString('assets/json_data/sample.json');
    final data = await json.decode(response);
    //print(data['data'][0]['postUrl']);

    final List<String> split = data['data'][0]['postUrl'].split('@ ');
    print(split[2].substring(0, split[2].length - 1));
    setState(() {
      _images = split;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Image Builder Application",
        ),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              readJson();
            },
            child: Text(
              "Sample",
            ),
          ),
          _images.isNotEmpty
              ? ListView.builder(
                  shrinkWrap: true,
                  itemBuilder: (context, data) {
                    if (data == 0) {
                      return Image.network(
                        _images[data].substring(1),
                        height: 100,
                      );
                    }
                    if (data == _images.length - 1) {
                      return Image.network(
                        _images[data].substring(0, _images[data].length - 1),
                        height: 100,
                      );
                    }
                    return Image.network(
                      _images[data],
                      height: 100,
                    );
                  },
                  itemCount: _images.length,
                )
              : Container()
        ],
      ),
    );
  }
}

first create a model class like this from api response

class Response {
  List<Data>? data;

  Response({this.data});

  Response.fromJson(Map<String, dynamic> json) {
    if (json['data'] != null) {
      data = <Data>[];
      json['data'].forEach((v) {
        data!.add(new Data.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.data != null) {
      data['data'] = this.data!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Data {
  int? sno;
  String? userid;
  String? postUrl;
  String? contentType;

  Data({this.sno, this.userid, this.postUrl, this.contentType});

  Data.fromJson(Map<String, dynamic> json) {
    sno = json['sno'];
    userid = json['userid'];
    postUrl = json['postUrl'];
    contentType = json['contentType'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['sno'] = this.sno;
    data['userid'] = this.userid;
    data['postUrl'] = this.postUrl;
    data['contentType'] = this.contentType;
    return data;
  }
}

then create stafull widget class

class ImageExample extends StatefulWidget {
  const ImageExample({Key key}) : super(key: key);

  @override
  State<ImageExample> createState() => _ImageExampleState();
}

class _ImageExampleState extends State<ImageExample> {
  ImageResponse imageResponse;
  @override
  Widget build(BuildContext context) {
    return imageResponse != null
        ? ListView.builder(
            shrinkWrap: true,
            itemBuilder: (context, data) {
              List<String> image = imageResponse.data[data].postUrl
                  .trim()
                  .replaceAll("[", "")
                  .replaceAll("]", "")
                  .replaceAll(" ", "")
                  .split("@");
              return ListView.builder(
                  shrinkWrap: true,
                  itemCount: image.length,
                  itemBuilder: (context, index) {
                    return Image.network(
                      image[index],
                      height: 100,
                      width: 100,
                    );
                  });
            },
            itemCount: imageResponse.data.length,
          )
        : Container();
  }

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

  Future<void> apiCall() async {
    var response = await http.get(
        Uri.parse('api')); // you http api address
    setState(() {
      final body = json.decode(response.body);
      imageResponse = ImageResponse.fromJson(body);
    });
  }
}