I am loading a crypto API from Coingecko in a ListView.builder widget.
This is the API: https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false
If I load it for the first time when I launch the emulator, the data shows almost instantly. Which is not bad.
However, if I make edits to my UI and try to do hot reloads, more often than not, it takes awhile for the data to appear on the emulator, approx 1 minutes to 5 minutes. Sometimes, nothing loads onto the screen and I do wonder if it is actually still running behind the scene. This makes it very hard for me to make adjustments/tweaks/design the UI. I will either have to :
Wait for it to appear on screen or
Close the emulator and restart again from the Virtual Device Manager for the data to appear right away on screen.
Is there a way for the data from the API to load faster to make the design experience much smoother? Or am I doing it the wrong way?
FYI, I use Android Studio.
Any help would be much appreciated. Thanks in advance.
The code is as follows:
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreen();
}
class _HomeScreenState extends State<HomeScreenScreen> {
Future<List<Asset>> fetchCoin() async {
assetList = [];
final response = await http.get(Uri.parse(
'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'));
if (response.statusCode == 200) {
List<dynamic> values = [];
values = json.decode(response.body);
if (values.length > 0) {
for (int i = 0; i < values.length; i++) {
if (values[i] != null) {
Map<String, dynamic> map = values[i];
assetList.add(Asset.fromJson(map));
}
}
setState(() {
assetList;
});
}
return assetList;
} else {
throw Exception('Failed to load coins');
}
}
@override
void initState() {
fetchCoin();
Timer.periodic(Duration(seconds: 1), (timer) => fetchCoin());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Add Asset', style: TextStyle(color: Colors.black),),
elevation: 0,
toolbarHeight: 50,
backgroundColor: Colors.white,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search, color: Colors.black26),
onPressed: () {},
)
],
),
body: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: assetList.length,
itemBuilder: (context, index) {
return AssetCryptoCard(
name: assetList[index].name,
image: assetList[index].image,
);
},
),
);
}
}