How to Create a Custom Error Screen for Your FlutterFlow App

Create a Component called NetworkErrorWidget. Layout: Column (mainAxisAlignment: center, crossAxisAlignment: center). Children: Image widget (wifi_off illustration, 150x150), SizedBox(24), Text 'No Internet Connection' (Headline Small), SizedBox(8), Text 'Check your connection and try again.' (Body Medium, grey), SizedBox(24), Button 'Retry' (Primary, On Tap: Action Parameter callback onRetry). The onRetry callback lets the parent page re-execute its Backend Query.

Create NotFoundWidget: Column centered with Image (404 illustration), Text 'Page Not Found' (Headline Small), Text 'The page you are looking for does not exist.' (Body Medium, grey), two Buttons: 'Go Back' (On Tap: Navigator Pop) and 'Go Home' (On Tap: Navigate to HomePage with Replace Route). This handles deep links to deleted content or manual URL entry.

Create EmptyStateWidget with parameter: message (String). Layout: Column centered with Image (empty box illustration), Text bound to message param (Body Medium, grey), optional Button 'Browse All' or 'Clear Filters'. Use this inside ListViews and GridViews when the Backend Query returns zero results — wrap the list and EmptyState in a Stack or use Conditional Visibility based on query result count.

On your data page, use a Stack with three layers: (1) your actual content Column, (2) NetworkErrorWidget with Conditional Visibility when connectivity fails, (3) EmptyStateWidget when query returns empty. For Backend Query errors, add an On Error branch in the Action Flow that sets a Page State errorType variable. Use Conditional Visibility on each error Component based on errorType value.

Add the connectivity_plus package to Pubspec Dependencies. Create a Custom Action called checkConnectivity that returns a boolean. Use Connectivity().checkConnectivity() — returns ConnectivityResult.none if offline. Call this action before Backend Queries or on error to determine if the issue is network-related. If offline, show NetworkErrorWidget. If online but query failed, show a generic error.

1import 'package:connectivity_plus/connectivity_plus.dart';
2
3Future<bool> checkConnectivity() async {
4  final result = await Connectivity().checkConnectivity();
5  return result != ConnectivityResult.none;
6}