Stuck in CircularProgressIndicator when Fetching data from json API in flutter - json

Question

I'm debugging an app on my physical device to fetch data from a json API but it keeps showing the CircularProgressIndicator as you see . Still a beginner and I've been trying to solve this for 3 days countinously . Thanks in advance, the code is below
here
main.dart code
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:json/pages/homePage.dart';
void main() {
FlutterError.onError = (FlutterErrorDetails details) {
FlutterError.dumpErrorToConsole(details);
if (kReleaseMode) exit(1);
};
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
}
homePage.dart file
import 'package:json/models/bcNewsModel.dart';
import 'package:json/services/api_manager.dart';
class HomePage extends StatefulWidget {
#override
MyHomePage createState() => MyHomePage();
// TODO: implement createState
}
class MyHomePage extends State<HomePage> {
Future<Bitcoin> _bcNews;
#override
void initeState() {
_bcNews = API_Manager().BCNews();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('BitCoin App'),
),
body: Container(
child: FutureBuilder<Bitcoin>(
future: _bcNews,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.articles.length,
// ignore: missing_return
itemBuilder: (context, index) {
var article = snapshot.data.articles[index];
Container(
height: 100,
child: Row(
children: <Widget>[
Image.network(article.urlToImage),
],
),
);
});
} else
return Center(child: CircularProgressIndicator());
},
),
));
}
}
api_manager.dart file
Bitcoin bitcoinFromJson(String str) => Bitcoin.fromJson(json.decode(str));
String bitcoinToJson(Bitcoin data) => json.encode(data.toJson());
class Bitcoin {
Bitcoin({
this.status,
this.totalResults,
this.articles,
});
String status;
int totalResults;
List<Article> articles;
factory Bitcoin.fromJson(Map<String, dynamic> json) => Bitcoin(
status: json["status"],
totalResults: json["totalResults"],
articles: List<Article>.from(
json["articles"].map((x) => Article.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"status": status,
"totalResults": totalResults,
"articles": List<dynamic>.from(articles.map((x) => x.toJson())),
};
}
class Article {
Article({
this.source,
this.author,
this.title,
this.description,
this.url,
this.urlToImage,
this.publishedAt,
this.content,
});
Source source;
String author;
String title;
String description;
String url;
String urlToImage;
DateTime publishedAt;
String content;
factory Article.fromJson(Map<String, dynamic> json) => Article(
source: Source.fromJson(json["source"]),
author: json["author"],
title: json["title"],
description: json["description"],
url: json["url"],
urlToImage: json["urlToImage"],
publishedAt: DateTime.parse(json["publishedAt"]),
content: json["content"],
);
Map<String, dynamic> toJson() => {
"source": source.toJson(),
"author": author,
"title": title,
"description": description,
"url": url,
"urlToImage": urlToImage,
"publishedAt": publishedAt.toIso8601String(),
"content": content,
};
}
class Source {
Source({
this.id,
this.name,
});
String id;
String name;
factory Source.fromJson(Map<String, dynamic> json) => Source(
id: json["id"],
name: json["name"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
};
}
Could the problem be with my physical device ?

Answer 1

Since you are trying to request this information, check in your manifest if you have enabled access to the internet. Otherwise, it will keep on blocking the requests.