Error 500
Loading preview
Starting the Flutter app
Warning icon, expandable error details, retry button
import 'package:flutter/material.dart';
class Error500 extends StatelessWidget {
const Error500({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Server Error')),
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.warning_amber_rounded,
size: 80,
color: Theme.of(context).colorScheme.error,
),
const SizedBox(height: 24),
Text(
'Something went wrong',
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 8),
Text(
'We\'re working on fixing the issue. Please try again later.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(height: 24),
ExpansionTile(
title: const Text('Error details'),
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Text(
'Error: Connection timeout (code 500)\nTimestamp: 2024-01-15 10:30:00',
style: Theme.of(context).textTheme.bodySmall,
),
),
],
),
const SizedBox(height: 16),
FilledButton.icon(
onPressed: () => _showDemo(context, 'Retry (demo)'),
icon: const Icon(Icons.refresh),
label: const Text('Retry'),
),
],
),
),
),
);
}
}
void _showDemo(BuildContext context, String message) {
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(SnackBar(content: Text(message)));
}
Add it to your project
Copies the Dart source into your app, so you own it. Flutter SDK only, no extra packages.
First time? Run dart pub global activate fluttertemplates_dev, or read the CLI guide.
How it works
A StatelessWidget, since ExpansionTile manages its own open state. The content sits in a SingleChildScrollView, so opening the details on a short screen scrolls instead of overflowing. The error text, including the January 2024 timestamp, is a hardcoded string, and Retry only shows a demo SnackBar.
Adapting it
- Pass the exception message into
Error500, and show it only in debug builds. - Accept an
onRetrycallback for theFilledButton.icon. - Show a support reference in place of raw details in production.