How can I load "image" in my flutter app from blogger API - flutter

Question

I am trying to load images from google blogger API, I'm succeed in loading "title" but when I try to load "image", I get an error in debug console -
'package:flutter/src/painting/_network_image_io.dart': Failed assertion: line 22 pos 14: 'url != null': is not true.
Code from blogger API:
"author": {
"id": "123",
"displayName": "Rajdeep Thakare",
"url": "https://www.blogger.com/profile/123",
"image": {
"url": "//lh3.googleusercontent.com/abcdefg"
}
},
A piece of code from my project:
body: Center(
child: _isLoading
? CircularProgressIndicator()
: ListView.builder(
itemCount: this.items != null ? this.items.length : 0,
itemBuilder: (context, i) {
final item = this.items[i];
return Column(
children: <Widget>[
Image.network(item["image"]),
Text(item["title"]),
Divider(),
],
);
//return Text("Row: $i");
}
),
),
Is there a problem in API or blogger won't allow me or my image insertion technique is wrong?
=================================================================================
Is it possible to retrive the post images from blogger API -
"selfLink": "https://www.googleapis.com/blogger/v3/blogs/633372055355686443/posts/8104714868335749943",
"title": "second post",
"content": "\u003cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003e\n\u003cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003e\n\u003ca href=\"https://1.bp.blogspot.com/-CbTldBdA_u8/Xn3R8evahLI/AAAAAAAAHJ0/b9gOD6EfI5QL9tXL-w05Qn2Z4eH_qVduQCLcBGAsYHQ/s1600/micheile-henderson-Xgn6rIpBEWo-unsplash.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border=\"0\" data-original-height=\"1600\" data-original-width=\"1067\" height=\"320\" src=\"https://1.bp.blogspot.com/-CbTldBdA_u8/Xn3R8evahLI/AAAAAAAAHJ0/b9gOD6EfI5QL9tXL-w05Qn2Z4eH_qVduQCLcBGAsYHQ/s320/micheile-henderson-Xgn6rIpBEWo-unsplash.jpg\" width=\"213\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\nthis is my second post\u003c/div\u003e\n",
"author": {

Answer 1

You cannot access the image URL directly via item["image"] because in your JSON String the URL is nested in Author->Image->URL. If we look closely at the error it tells us 'url != null': is not true which simply means your URL (aka the item["image"] variable) == null
To access the URL you have to go through the keys in your JSON string. Here is an example code:
import 'dart:convert';
var jsonString =
"""
{
"author": {
"id": "123",
"displayName": "Rajdeep Thakare",
"url": "https://www.blogger.com/profile/123",
"image": {
"url": "//lh3.googleusercontent.com/abcdefg"
}
}
}
""";
void main() {
var obj = json.decode(jsonString);
print(obj['author']['image']['url']); // prints out '//lh3.googleusercontent.com/abcdefg'
}

Answer 2

Just check out the below example as url is wrong so it will not work but if you put the right url it will work for sure.
Just check the below example :
Below is the sample json that you provided i have just changed the image objects url as your url was not accessible :
{
"author": {
"id": "123",
"displayName": "Rajdeep Thakare",
"url": "https://www.blogger.com/profile/123",
"image": {
"url": "https://i.picsum.photos/id/178/536/354.jpg"
}
}
}
Later i have created a model class for it which is mentioned below:
// To parse this JSON data, do
//
// final author = authorFromJson(jsonString);
import 'dart:convert';
Author authorFromJson(String str) => Author.fromJson(json.decode(str));
String authorToJson(Author data) => json.encode(data.toJson());
class Author {
AuthorClass author;
Author({
this.author,
});
factory Author.fromJson(Map<String, dynamic> json) => Author(
author: AuthorClass.fromJson(json["author"]),
);
Map<String, dynamic> toJson() => {
"author": author.toJson(),
};
}
class AuthorClass {
String id;
String displayName;
String url;
Image image;
AuthorClass({
this.id,
this.displayName,
this.url,
this.image,
});
factory AuthorClass.fromJson(Map<String, dynamic> json) => AuthorClass(
id: json["id"],
displayName: json["displayName"],
url: json["url"],
image: Image.fromJson(json["image"]),
);
Map<String, dynamic> toJson() => {
"id": id,
"displayName": displayName,
"url": url,
"image": image.toJson(),
};
}
class Image {
String url;
Image({
this.url,
});
factory Image.fromJson(Map<String, dynamic> json) => Image(
url: json["url"],
);
Map<String, dynamic> toJson() => {
"url": url,
};
}
And at last the main file for ui and data fetching :
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart';
import 'dummy.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isLoading = false;
List<Author> authorList = List();
#override
void initState() {
// TODO: implement initState
super.initState();
youMethodCall();
}
youMethodCall() async {
setState(() {
_isLoading = true;
});
String jsonString = await loadFromAssets();
// I have taken the local json file you can
// make a api call here and when you get the
// response just pass to the below method as show below
// final author = authorFromJson(response.body);
// else every thing is the same.
final author = authorFromJson(jsonString);
authorList.add(author);
setState(() {
_isLoading = false;
});
}
Future<String> loadFromAssets() async {
return await rootBundle.loadString('json/parse.json');
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: _isLoading
? CircularProgressIndicator()
: ListView.builder(
itemCount: authorList.length,
itemBuilder: (context, i) {
final item = authorList[i].author;
return Column(
children: <Widget>[
CachedNetworkImage(
imageUrl: item.image.url,
placeholder: (context, url) =>
CircularProgressIndicator(),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
Text(item
.displayName), // As you title field was not displayed
Divider(),
],
);
//return Text("Row: $i");
}),
),
),
);
}
}

Answer 3

I'll try my best to help you to solve the issue.
Question 1: Retrieve image through URL
Try to print Image.network(items->author->url), and add items->author->image->url to see if there's the url.
print(obj['author']['image']['url']);
Question 2: Retrieve images in a post
You can find all <img> tags and get src="" attribute to get the image urls from items->content
I hope this helps.