retrieve body of json from api - flutter

Question

I'm trying to return the quote section from this api located here: https://api.quotable.io/random
The json looks like this:
{"_id":"9hIehvX23pvr","content":"There is no charm equal to tenderness
of heart.","author":"Jane Austen"}
Here is the part of the code that connects to the API.
Future<String> _getQuote() async {
final res = await http.get('https://api.quotable.io/random');
return json.decode(res.body);
}
Whenever I run the app, I get this error that tells me it's getting a null. But I know the api works.
_FutureBuilderState#b8df9): I/flutter ( 5315): A non-null String must be provided to a Text widget. I/flutter ( 5315):
'package:flutter/src/widgets/text.dart': I/flutter ( 5315): Failed
assertion: line 269 pos 10: 'data != null'
I just need the "content" part of the json. How would I parse just that part?
Thanks!

Answer 1

#SkyeBoniwell, not getting any response with the api. Sure it's working?
Screenshot:

Answer 2

You can copy paste run full code below
Step1 : add <uses-permission android:name="android.permission.INTERNET"/> to AndroidManifest
Step2 : Use the following class to parse
Demo demoFromJson(String str) => Demo.fromJson(json.decode(str));
String demoToJson(Demo data) => json.encode(data.toJson());
class Demo {
String id;
String content;
String author;
Demo({
this.id,
this.content,
this.author,
});
factory Demo.fromJson(Map<String, dynamic> json) => Demo(
id: json["_id"],
content: json["content"],
author: json["author"],
);
Map<String, dynamic> toJson() => {
"_id": id,
"content": content,
"author": author,
};
}
working demo
full working code
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
Demo demoFromJson(String str) => Demo.fromJson(json.decode(str));
String demoToJson(Demo data) => json.encode(data.toJson());
class Demo {
String id;
String content;
String author;
Demo({
this.id,
this.content,
this.author,
});
factory Demo.fromJson(Map<String, dynamic> json) => Demo(
id: json["_id"],
content: json["content"],
author: json["author"],
);
Map<String, dynamic> toJson() => {
"_id": id,
"content": content,
"author": author,
};
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FutureBuilderWidget(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
String url = ' http://api.quotable.io/random';
///Method for GET Request
Future<Demo> getDemoResponse() async {
final response = await http.get('https://api.quotable.io/random');
print('response ${response}');
if (response.statusCode == 200) {
print('response body${response.body}');
return demoFromJson(response.body);
} else {
throw Exception('Failed to load ');
}
}
class FutureBuilderWidget extends StatefulWidget {
#override
_FutureBuilderWidgetState createState() => _FutureBuilderWidgetState();
}
class _FutureBuilderWidgetState extends State<FutureBuilderWidget> {
bool _isButtonClicked = false;
var _buttonIcon = Icons.cloud_download;
var _buttonText = "Fetch Data";
var _buttonColor = Colors.green;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Container(
child: Center(
child: Text(
'Future Builder Widget',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
//fontFamily: Utils.ubuntuRegularFont
),
),
),
margin: EdgeInsets.only(right: 48),
),
),
body: Center(
child: FutureBuilder<Demo>(
///If future is null then API will not be called as soon as the screen
///loads. This can be used to make this Future Builder dependent
///on a button click.
future: _isButtonClicked ? getDemoResponse() : null,
builder: (context, snapshot) {
switch (snapshot.connectionState) {
///when the future is null
case ConnectionState.none:
return Text(
'Press the button to fetch data',
textAlign: TextAlign.center,
);
case ConnectionState.active:
///when data is being fetched
case ConnectionState.waiting:
return CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.blue));
case ConnectionState.done:
///task is complete with an error (eg. When you
///are offline)
if (snapshot.hasError)
return Text(
'Error:\n\n${snapshot.error}',
textAlign: TextAlign.center,
);
///task is complete with some data
return Text(
'Fetched Data:\n\n${snapshot.data.content}',
textAlign: TextAlign.center,
);
}
},
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton.extended(
backgroundColor: _buttonColor,
onPressed: () {
///Calling method to fetch data from the server
//getDemoResponse();
///You need to reset UI by calling setState.
setState(() {
_isButtonClicked == false
? _isButtonClicked = true
: _isButtonClicked = false;
if (!_isButtonClicked) {
_buttonIcon = Icons.cloud_download;
_buttonColor = Colors.green;
_buttonText = "Fetch Data";
} else {
_buttonIcon = Icons.replay;
_buttonColor = Colors.deepOrange;
_buttonText = "Reset";
}
});
},
icon: Icon(
_buttonIcon,
color: Colors.white,
),
label: Text(
_buttonText,
style: TextStyle(color: Colors.white),
),
),
);
}
}