API calls are an essential part of modern Flutter applications, fetching data from external services to provide dynamic content. However, API requests can sometimes fail due to various reasons like network issues, server errors, or authentication problems. It's crucial to gracefully handle these failures to provide a seamless user experience.
Here are some common scenarios where API requests might fail in Flutter:
Let's explore some proven techniques to effectively handle failed API requests in Flutter:
The most basic way to handle errors in Dart is by using `try...catch` blocks. Wrap your API call within a `try` block and handle any exceptions thrown within a `catch` block.
try {
// Make your API call here
final response = await http.get(Uri.parse('https://api.example.com/data'));
// Process the response data
} catch (e) {
// Handle the error, e.g., display an error message to the user
print('Error: $e');
}
The `Future.catchError` method provides a more concise way to handle exceptions thrown by asynchronous operations. You can specify a callback function that will be executed if the `Future` encounters an error.
http.get(Uri.parse('https://api.example.com/data'))
.catchError((error) {
// Handle the error here
print('Error: $error');
})
.then((response) {
// Process the response data here
});
For displaying data fetched from APIs, the `FutureBuilder` widget is highly recommended. It allows you to build UI based on the status of the `Future`, displaying a loading indicator while waiting for the response and handling errors gracefully.
FutureBuilder(
future: http.get(Uri.parse('https://api.example.com/data')),
builder: (context, snapshot) {
if (snapshot.hasData) {
// Data is available, display it
return Text(snapshot.data.toString());
} else if (snapshot.hasError) {
// Error occurred, display an error message
return Text('Error: ${snapshot.error}');
} else {
// Still loading, display a loading indicator
return CircularProgressIndicator();
}
},
);
Sometimes, API failures are temporary. In such cases, it's beneficial to automatically retry the request after a short delay. Here's how you can implement retry logic in Flutter:
Future retry(Future Function() request, int attempts, Duration delay) async {
int attempt = 0;
while (attempt < attempts) {
try {
return await request();
} catch (e) {
attempt++;
print('Attempt ${attempt}: Error: $e');
await Future.delayed(delay);
}
}
throw Exception('Retry limit exceeded');
}
This `retry` function takes the request function, the number of attempts, and the delay between attempts as arguments. It repeatedly calls the request function until it succeeds or the retry limit is reached. You can use this function like this:
retry(() => http.get(Uri.parse('https://api.example.com/data')), 3, Duration(seconds: 2))
.then((response) {
// Process the successful response
})
.catchError((error) {
// Handle the error after all retries have failed
print('Error: $error');
});
FutureBuilder(
future: retry(() => http.get(Uri.parse('https://api.example.com/data')), 3, Duration(seconds: 2)),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data!.body.toString()); // Assuming you want to display the response body
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return CircularProgressIndicator();
}
},
);
It's essential to provide clear and informative feedback to users when an API request fails. Avoid generic error messages that don't provide any context. Here are some tips for error handling and user feedback:
Display a user-friendly error message that explains the problem. For example, if the network connection is unavailable, you can show a message like "No internet connection. Please check your connection and try again."
If the error might be temporary, offer users the option to retry the request. This could be a button labeled "Retry" or a simple notification that the request is being retried automatically.
Handle different types of errors differently. For example, if the user's authentication token is expired, you might redirect them to a login screen. If the API is experiencing downtime, you could display a message like "Service is temporarily unavailable. Please try again later."
Log errors to a file or a remote server to help you identify recurring issues and improve your app's reliability.
A `SnackBar` is an excellent way to provide brief, non-intrusive error messages to users. It can be used to display temporary error notifications without disrupting the user's flow.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('An error occurred. Please try again later.'),
),
);