How to load JSON data in Flutter?

Flutter
YouTube Video for Loading JSON data in Flutter
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('JSON to List'),
),
body: new Center(
child: new Text(
'Hello World !',
style: Theme.of(context).textTheme.headline,
),
),
));
}
}
import 'package:http/http.dart' as http;
import 'dart:convert';
String name, username, avatar;
bool isData = false;
FetchJSON() async {
var Response = await http.get(
"https://api.github.com/users/nitishk72",
headers: {"Accept": "application/json"},
);

if (Response.statusCode == 200) {
String responseBody = Response.body;
var responseJSON = json.decode(responseBody);
username = responseJSON['login'];
name = responseJSON['name'];
avatar = responseJSON['avatar_url'];
isData = true;
setState(() {
print('UI Updated');
});
} else {
print('Something went wrong. \nResponse Code : ${Response.statusCode}');
}
}
@override
void initState() {
FetchJSON();
}
Widget MyUI(){
return new Container(
padding: new EdgeInsets.all(20.0),
child: new ListView(
children: <Widget>[
new Image.network(
avatar,
width: 100.0,
height: 100.0,
),
new Padding(padding: new EdgeInsets.symmetric(vertical: 6.0)),
new Text(
'Name : $name',
style: Theme.of(context).textTheme.headline,
),
new Padding(padding: new EdgeInsets.symmetric(vertical: 6.0)),
new Text(
'Username : $username',
style: Theme.of(context).textTheme.title,
),
],
),
);
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Fetch JSON Data'),
),
body: isData
? new Center(
child: new CircularProgressIndicator(),
)
: MyUI(),
),
);
}
Flutter JSON Fetch Screenshot
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
String name, username, avatar;
bool isData = false;

FetchJSON() async {
var Response = await http.get(
"https://api.github.com/users/nitishk72",
headers: {"Accept": "application/json"},
);

if (Response.statusCode == 200) {
String responseBody = Response.body;
var responseJSON = json.decode(responseBody);
username = responseJSON['login'];
name = responseJSON['name'];
avatar = responseJSON['avatar_url'];
isData = true;
setState(() {
print('UI Updated');
});
} else {
print('Something went wrong. \nResponse Code : ${Response.statusCode}');
}
}

@override
void initState() {
FetchJSON();
}

Widget MyUI() {
return new Container(
padding: new EdgeInsets.all(20.0),
child: new ListView(
children: <Widget>[
new Image.network(
avatar,
width: 100.0,
height: 100.0,
),
new Padding(padding: new EdgeInsets.symmetric(vertical: 6.0)),
new Text(
'Name : $name',
style: Theme.of(context).textTheme.headline,
),
new Padding(padding: new EdgeInsets.symmetric(vertical: 6.0)),
new Text(
'Username : $username',
style: Theme.of(context).textTheme.title,
),
],
),
);
}

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Fetch JSON'),
),
body: isData
? new Center(
child: new CircularProgressIndicator(),
)
: MyUI(),
),
);
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nitish Kumar Singh

Web🌐/ Mobile📱/ GraphQL / Cloud☁️ . Full-time programmer, part-time content creator, and Freelancer.