Flutter - setState isn't working inside http response code - flutter

Question

I am having a simple page to fetch data from server and parsing the response.
I am having two widgets that are visible to user, one is the _loadingWidget() widget another one is the errorWidget() widget.
I have added some print statements for showing up to where code is being executed. Everything is working fine but setState for errorWidget() is not working.
What i'm doing wrong here?
import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:validators/validators.dart';
import '../strings.dart';
class FetchDataPage extends StatefulWidget {
final String text;
FetchDataPage({Key key, #required this.text}) : super(key: key);
#override
_FetchDataState createState() => _FetchDataState();
}
class _FetchDataState extends State<FetchDataPage> {
String _productUrl;
Widget pageWidget;
#override
Widget build(BuildContext context) {
pageWidget = _loadingWidget();
_productUrl = widget.text;
checkPrice(_productUrl);
return Scaffold(
body: Container(padding: EdgeInsets.all(20.0), child: pageWidget),
);
}
Widget _loadingWidget() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Center(
child: CircularProgressIndicator(
backgroundColor: Colors.transparent,
valueColor: AlwaysStoppedAnimation<Color>(Colors.blueGrey),
),
),
SizedBox(height: 20.0),
Text(
"Checking Price...",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 20.0,
fontWeight: FontWeight.w500,
),
),
],
);
}
Widget errorWidget() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Center(
child: Icon(
Icons.sentiment_dissatisfied,
color: Colors.red,
size: 60.0,
),
),
SizedBox(height: 20.0),
Center(
child: Text(
"Product not found in database.\nPlease try again later.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blueGrey,
fontSize: 17.0,
fontWeight: FontWeight.w500,
),
),
),
],
);
}
void checkPrice(String productUrl) {
bool isUrl = isURL(productUrl, requireProtocol: true, requireTld: true);
if (!isUrl) {
RegExp regExp = new RegExp(r"((\w+:\/\/\S+)|(\w+[\.:]\w+\S+))[^\s,\.]");
setState(() {
productUrl = regExp.stringMatch(productUrl).toString();
});
}
/*
//setState is Working fine here!
setState(() {
pageWidget = errorWidget();
});
*/
var response = getLatestPrice(productUrl);
response.then((response) {
/*
//It's Not Working Here :(
setState(() {
pageWidget = errorWidget();
});
*/
print("Got Response: " + response.body.toString());
if (response.statusCode == 200) {
var loginData = json.decode(response.body);
bool status = loginData["status"];
print("STATUS: " + status.toString());
if (status) {
//This print statement is also working fine!
print(loginData["productUrl"]);
} else {
//This isn't working either
setState(() {
pageWidget = errorWidget();
});
}
} else {
//Not Working
setState(() {
pageWidget = errorWidget();
});
}
});
}
}
Future<http.Response> getLatestPrice(productUrl) async {
var url = Strings.baseUrl + 'api/checkPrice';
var response = await http.post(url, body: {
'product_url': productUrl,
}, headers: {
HttpHeaders.authorizationHeader:
"Basic " + base64Encode(utf8.encode('username:password'))
});
return response;
}

Answer 1

I fixed it by setting a bool instead:
import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:validators/validators.dart';
import '../strings.dart';
class FetchDataPage extends StatefulWidget {
final String text;
FetchDataPage({Key key, #required this.text}) : super(key: key);
#override
_FetchDataState createState() => _FetchDataState();
}
class _FetchDataState extends State<FetchDataPage> {
String _productUrl;
bool showError = false;
#override
Widget build(BuildContext context) {
_productUrl = widget.text;
if (_productUrl != null) {
checkPrice(_productUrl);
}
return Scaffold(
body: Container(padding: EdgeInsets.all(20.0), child: pageWidget()),
);
}
Widget pageWidget() {
if (showError == false) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Center(
child: CircularProgressIndicator(
backgroundColor: Colors.transparent,
valueColor: AlwaysStoppedAnimation<Color>(Colors.blueGrey),
),
),
SizedBox(height: 20.0),
Text(
"Checking Price...",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 20.0,
fontWeight: FontWeight.w500,
),
),
],
);
} else {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Center(
child: Icon(
Icons.sentiment_dissatisfied,
color: Colors.red,
size: 60.0,
),
),
SizedBox(height: 20.0),
Center(
child: Text(
"Product not found in database.\nPlease try again later.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blueGrey,
fontSize: 17.0,
fontWeight: FontWeight.w500,
),
),
),
],
);
}
}
void checkPrice(String productUrl) {
bool isUrl = isURL(productUrl, requireProtocol: true, requireTld: true);
if (!isUrl) {
RegExp regExp = new RegExp(r"((\w+:\/\/\S+)|(\w+[\.:]\w+\S+))[^\s,\.]");
setState(() {
productUrl = regExp.stringMatch(productUrl).toString();
});
}
var response = getLatestPrice(productUrl);
response.then((response) {
if (response.statusCode == 200) {
var loginData = json.decode(response.body);
bool status = loginData["status"];
if (status) {
print(loginData["productUrl"]);
} else {
setState(() {
showError = true;
});
}
} else {
setState(() {
showError = true;
});
}
});
}
}
Future<http.Response> getLatestPrice(productUrl) async {
var url = Strings.baseUrl + 'api/checkPrice';
var response = await http.post(url, body: {
'product_url': productUrl,
}, headers: {
HttpHeaders.authorizationHeader:
"Basic " + base64Encode(utf8.encode('username:password'))
});
return response;
}