How to create a screen on socket exception in flutter? - flutter

Question

In my flutter project I need to show some illustration images when socket exception occurs when API was called. How can I do that ?
Thanks in advance

Answer 1

This will help on socket exception and format exception.
Create model class for httpresponse
class HTTPResponse<T> {
bool isSuccessful;
T data;
String message;
int responseCode;
HTTPResponse(this.isSuccessful, this.data, {this.message, this.responseCode});
}
Then use this model in api response like this
Future<HTTPResponse<List<Post>>> getPosts(
{int limit = 20, int page = 1}) async {
String url =
'https://jsonplaceholder.typicode.com/posts?_limit=$limit&_page=$page';
Uri uri = Uri.parse(url);
try {
var response = await http.get(uri);
if (response.statusCode == 200) {
var body = json.decode(response.body);
List<Post> postsList = [];
body.forEach((e) {
Post post = Post.fromJson(e);
postsList.add(post);
});
return HTTPResponse(
true,
postsList,
responseCode: response.statusCode,
);
} else {
return HTTPResponse(false, null,
message: 'Invalid response from server',
responseCode: response.statusCode);
}
} on SocketException {
return HTTPResponse(false, [], message: 'Unable to reach the internet');
} on FormatException {
return HTTPResponse(false, [], message: 'Invalid response from server');
} catch (e) {
return HTTPResponse(false, [],
message: "Something went wrong please try in a minute or two");
}
}

Answer 2

It depends on where you want to show it in the widget tree. One simple example would be to push a new screen on to the navigation stack. You will need the BuildContext in your function where the exception might occur.
void someMethod(BuildContext context) {
try {
//some code that might throw an exception
} on Exception catch (_) {
Navigator.pushNamed(context, "Your illustration view");
}
}
Another example would be to add it to your widget tree depending on a bool. You set that bool to true when an exception is thrown.
void someOtherMethod() {
try {
//some code that might throw an exception
} on Exception catch (_) {
setState(() {
hasThrownError = true;
});
}
}
Use it in your widget tree like so:
bool hasThrownError = false;
Widget buildWidgetTree() {
return hasThrownError
? Text("This is where you can show your error illustration")
: Text("This is wher you can show your regular view");
}