Error display patterns in Flutter - Mini App: Build & Ship

Build: Error Display Screen

This screen shows how to display different types of error messages to users in a friendly way.

Target UI

┌───────────────────────────────┐
│ Error Display Screen           │
├───────────────────────────────┤
│ [Show Network Error]           │
│ [Show Validation Error]        │
│ [Show Unknown Error]           │
│                               │
│ Error message appears here    │
│                               │
└───────────────────────────────┘

Add three buttons labeled: 'Show Network Error', 'Show Validation Error', and 'Show Unknown Error'.

When a button is tapped, display a corresponding error message below the buttons.

Use red color for error messages and an icon to indicate error.

The error message area should be empty initially.

Make sure the UI is accessible with proper labels.

Starter Code

Flutter

import 'package:flutter/material.dart';

class ErrorDisplayScreen extends StatefulWidget {
  @override
  State<ErrorDisplayScreen> createState() => _ErrorDisplayScreenState();
}

class _ErrorDisplayScreenState extends State<ErrorDisplayScreen> {
  String _errorMessage = '';

  void _showError(String message) {
    setState(() {
      _errorMessage = message;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Error Display Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            ElevatedButton(
              onPressed: () {
                // TODO: Show network error message
              },
              child: const Text('Show Network Error'),
            ),
            ElevatedButton(
              onPressed: () {
                // TODO: Show validation error message
              },
              child: const Text('Show Validation Error'),
            ),
            ElevatedButton(
              onPressed: () {
                // TODO: Show unknown error message
              },
              child: const Text('Show Unknown Error'),
            ),
            const SizedBox(height: 24),
            // TODO: Display error message here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class ErrorDisplayScreen extends StatefulWidget {
  @override
  State<ErrorDisplayScreen> createState() => _ErrorDisplayScreenState();
}

class _ErrorDisplayScreenState extends State<ErrorDisplayScreen> {
  String _errorMessage = '';

  void _showError(String message) {
    setState(() {
      _errorMessage = message;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Error Display Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            ElevatedButton(
              onPressed: () {
                _showError('Network error: Please check your internet connection.');
              },
              child: const Text('Show Network Error'),
            ),
            ElevatedButton(
              onPressed: () {
                _showError('Validation error: Please enter a valid email address.');
              },
              child: const Text('Show Validation Error'),
            ),
            ElevatedButton(
              onPressed: () {
                _showError('Unknown error occurred. Please try again later.');
              },
              child: const Text('Show Unknown Error'),
            ),
            const SizedBox(height: 24),
            if (_errorMessage.isNotEmpty)
              Row(
                children: [
                  const Icon(Icons.error_outline, color: Colors.red, semanticLabel: 'Error icon'),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      _errorMessage,
                      style: const TextStyle(color: Colors.red, fontSize: 16),
                      semanticsLabel: 'Error message',
                    ),
                  ),
                ],
              ),
          ],
        ),
      ),
    );
  }
}

We added three buttons that each show a different error message when tapped. The messages appear below the buttons in red color with an error icon to catch the user's attention. The error message area is empty at first and only shows when there is an error message to display. We used a Row with an Icon and Text for clear visual and accessibility. This pattern helps users understand what went wrong in a friendly and clear way.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Error Display Screen           │
├───────────────────────────────┤
│ [Show Network Error]           │
│ [Show Validation Error]        │
│ [Show Unknown Error]           │
│                               │
│ ⚠ Network error: Please check  │
│   your internet connection.    │
│                               │
└───────────────────────────────┘

Tapping 'Show Network Error' displays a red error message with an error icon about internet connection.

Tapping 'Show Validation Error' displays a red error message about invalid email.

Tapping 'Show Unknown Error' displays a red error message about an unknown error.

If no button is tapped, no error message is shown.

Stretch Goal

Add a 'Clear Error' button that removes the error message when tapped.

💡 Hint

Add another ElevatedButton that calls _showError with an empty string to clear the message.