How show wordpress content image api

Question

i want to show image content in my flutter app . i use wordpress api . i use this class to show featuredmedia , title and content

 Post.fromJson(Map<String, dynamic> json)
  : title = json['title']["rendered"],
    excerpt = json['excerpt']["rendered"],
    image = json["_embedded"]['wp:featuredmedia'][0]["media_details"]
        ["sizes"]["medium"]["source_url"],
    date = json['date'],
    content = json['content']["rendered"],
      id = json['id'];

and this is wordpress content

"content": { "rendered": "The PM has warned MPs they are damaging his chances of getting a deal with the EU by trying to block a no-deal Brexit.

\n

Boris Johnson said the UK would leave the bloc “do or die” on 31 October – prompting some MPs to act to stop the UK leaving without an agreement.

\n

But he said the more MPs try to block a no-deal Brexit, “the more likely it is that we’ll end up in that situation”.

\n

It comes after the PM announced he would be suspending Parliament for five weeks over September and October.

\n

Mr Johnson said it was to allow the government to hold a Queen’s Speech and outline its “very exciting agenda” for the future.

\n

But critics claim his intention is to prevent any moves in the Commons to stop a no deal.

\n

https://iraqmedianews.com/wp-content/uploads/2019/08/file-20181002-85614-vu0p6l-300x205.jpg\" alt=\"\" width=\"300\" height=\"205\" srcset=\"https://iraqmedianews.com/wp-content/uploads/2019/08/file-20181002-85614-vu0p6l-300x205.jpg 300w, https://iraqmedianews.com/wp-content/uploads/2019/08/file-20181002-85614-vu0p6l-768x524.jpg 768w, https://iraqmedianews.com/wp-content/uploads/2019/08/file-20181002-85614-vu0p6l.jpg 926w\" sizes=\"(max-width: 300px) 100vw, 300px\" />

\n", "protected": false },

Son of Stackoverflow Son of Stackoverflow · Accepted Answer · 2019-08-30T16:51:35

You can use the Image.network to display the image once you get the link to that image.

Example Code with solution:

    String imageUrl,rawString,i,j;
    [...]
    // At some point of your code
    rawString  = json['content']["rendered"];   
    for(int i=0;i<rawString.length;i++) if(rawString[i]=='=' && rawString[i-1]=='t' && rawString[i-2]=='e' && rawString[i-3]=='s' && rawString[i-4]=='c' && rawString[i-5]=='r' && rawString[i-6]=='s') 
for(j=i+3;(rawString[i]=='.' && (rawString.substring(j,j+4)=="jpg")||rawString.substring(j,j+4)=="png");j++)
   imageUrl = rawString.substring(i,j+4);
    [...]
    // The place where you want to display your widget
    Image.network(
      imageUrl, // Can add more attributes 
    );

I have just used logical AND to efficiently find 'srcset=' and then have tried to get the link as a substring by looking for the file extension.

It might not work in all the cases, but something is better than nothing.

If your facing any other issue similar and if you don't have time to implement your own logic use the html package developed by Flutter's official dev team.

https://pub.dev/packages/html

Alternatively you can even refer to either of these 2 packages(since your working with wordpress),

https://pub.dev/packages/flutter_wordpress

https://pub.dev/packages/wordpress_api

How show wordpress content image api

1 Answers