Flutter run async operation on object creation - api

Question

I'm new to flutter and I know it's a very basic question but I've been stuck on this one for three days. I just want to fetch data from an API on object creation. When you run the code it throws an exception But when you Hot Reload it, the async operation starts to work fine. Kindly tell me where I'm wrong. I myself have made extra classes although one should avoid to code with that approach.
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main(){
runApp(
MaterialApp(
title : "Quake",
home : HomePage()
)
);
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
void initState() {
super.initState();
dataRepository.init();
}
#override
Widget build(BuildContext context) {
return Reading();
}
}
class Reading extends StatefulWidget {
#override
_ReadingState createState() => _ReadingState();
}
class _ReadingState extends State<Reading> {
Map _data = Map();
List _features = List();
#override
void initState() {
super.initState();
_data = dataRepository.getReading();
_features = _data['features'];
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Quake"),
centerTitle: true,
backgroundColor: Colors.black,
),
body : Center(
child : ListView.builder(
itemCount: _features.length,
padding: const EdgeInsets.all(14.5),
itemBuilder: (BuildContext context, int position){
var format = DateFormat.yMMMd("en_US").add_jm();
var _date = format.format( DateTime.fromMicrosecondsSinceEpoch(_features[position]['properties']['time']*1000, isUtc: true));
return Column(
children: <Widget>[
Divider(height : 5.5),
ListTile(
title: Text("$_date",
style: TextStyle(fontSize: 16.0)),
subtitle: Text("${_features[position]['properties']['place']}",
style: TextStyle(fontSize: 13.0)),
leading: CircleAvatar(
backgroundColor : Colors.black,
child : Text("${_features[position]['properties']['mag']}", style: TextStyle( color: Colors.white))
),
onTap: () => _windowOnTapping(context, _features[position]['properties']['title']),
)],);},)));}}
Future _windowOnTapping(BuildContext context, String message){
var alert = AlertDialog(
title: Text("Quakes"),
content: Text(message),
actions: <Widget>[
FlatButton ( child: Text("OK"), onPressed: (){ Navigator.pop(context);})
],
);
showDialog( context: context, builder: (context)=> alert);
}
final DataRepository dataRepository = DataRepository._private();
class DataRepository{
DataRepository._private();
Map _data;
void init() async{
String apiUrl = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson';
http.Response response = await http.get(apiUrl);
_data = json.decode(response.body);
}
Map getReading(){
return _data;
}
}

Answer 1

Use a FutureBuilder to read the Future and only render the component after it returns, something like this:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(MaterialApp(title: "Quake", home: HomePage()));
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Reading();
}
}
class Reading extends StatefulWidget {
#override
_ReadingState createState() => _ReadingState();
}
class _ReadingState extends State<Reading> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Quake"),
centerTitle: true,
backgroundColor: Colors.black,
),
body: FutureBuilder<Map>(
future: dataRepository.getReading(),
builder: (context, snapshot) {
if (snapshot.hasData) {
var features = snapshot.data['features'];
return Center(
child: ListView.builder(
itemCount: features.length,
padding: const EdgeInsets.all(14.5),
itemBuilder: (BuildContext context, int position) {
var format = DateFormat.yMMMd("en_US").add_jm();
var _date = format.format(
DateTime.fromMicrosecondsSinceEpoch(
features[position]['properties']['time'] * 1000,
isUtc: true));
return Column(
children: <Widget>[
Divider(height: 5.5),
ListTile(
title:
Text("$_date", style: TextStyle(fontSize: 16.0)),
subtitle: Text(
"${features[position]['properties']['place']}",
style: TextStyle(fontSize: 13.0)),
leading: CircleAvatar(
backgroundColor: Colors.black,
child: Text(
"${features[position]['properties']['mag']}",
style: TextStyle(color: Colors.white))),
onTap: () => _windowOnTapping(context,
features[position]['properties']['title']),
)
],
);
},
));
} else {
return Text("Loading");
}
}));
}
}
Future _windowOnTapping(BuildContext context, String message) {
var alert = AlertDialog(
title: Text("Quakes"),
content: Text(message),
actions: <Widget>[
FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.pop(context);
})
],
);
showDialog(context: context, builder: (context) => alert);
}
final DataRepository dataRepository = DataRepository._private();
class DataRepository {
DataRepository._private();
Future<Map> getReading() async {
String apiUrl =
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson';
http.Response response = await http.get(apiUrl);
var data = json.decode(response.body);
print(data);
return data;
}
}