Error display patterns in Flutter

Introduction

Showing errors clearly helps users understand what went wrong and how to fix it. It makes apps friendlier and easier to use.

When a user enters wrong information in a form field.

When the app fails to load data from the internet.

When a required permission is denied by the user.

When a button action cannot complete due to missing input.

When a background process encounters a problem.

Syntax

Flutter

Text('Error message', style: TextStyle(color: Colors.red))

// Or use Flutter's built-in widgets like SnackBar or AlertDialog to show errors.

Use red color or icons to highlight errors visually.

Keep error messages short and clear.

Examples

Shows a simple red error message below a form field.

Flutter

Text('Please enter a valid email', style: TextStyle(color: Colors.red))

Displays a temporary message at the bottom of the screen.

Flutter

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Failed to load data'))
);

Shows a popup dialog to alert the user about an error.

Flutter

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Error'),
    content: Text('Network connection lost'),
    actions: [
      TextButton(onPressed: () => Navigator.pop(context), child: Text('OK'))
    ],
  ),
);

Sample App

This app shows a text field for email input. When you press Submit, it checks if the field is empty or missing '@'. If there is an error, it shows a red error message below the field. If input is valid, it shows a SnackBar message.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Error Display Example')),
        body: const ErrorExample(),
      ),
    );
  }
}

class ErrorExample extends StatefulWidget {
  const ErrorExample({super.key});

  @override
  State<ErrorExample> createState() => _ErrorExampleState();
}

class _ErrorExampleState extends State<ErrorExample> {
  final TextEditingController _controller = TextEditingController();
  String? _errorText;

  void _validate() {
    setState(() {
      if (_controller.text.isEmpty) {
        _errorText = 'This field cannot be empty';
      } else if (!_controller.text.contains('@')) {
        _errorText = 'Please enter a valid email';
      } else {
        _errorText = null;
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Input is valid!'))
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: 'Email',
              errorText: _errorText,
            ),
            keyboardType: TextInputType.emailAddress,
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: _validate,
            child: const Text('Submit'),
          ),
        ],
      ),
    );
  }
}

Important Notes

Use errorText property in InputDecoration to show inline errors in text fields.

SnackBars are good for short, temporary messages that do not block user actions.

Dialogs should be used sparingly for important errors that need user acknowledgment.

Summary

Show errors clearly using red text or icons.

Use inline error messages for form fields with errorText.

Use SnackBar for brief messages and AlertDialog for important alerts.