Error 404
Loading preview
Starting the Flutter app
Large 404, playful design, Go Home button
import 'package:flutter/material.dart';
class Error404 extends StatelessWidget {
const Error404({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'404',
style: Theme.of(context).textTheme.displayLarge?.copyWith(
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.primary,
),
),
const SizedBox(height: 16),
Text(
'Page not found',
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 8),
Text(
'The page you\'re looking for doesn\'t exist or has been moved.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(height: 32),
FilledButton.icon(
onPressed: () => _showDemo(context, 'Go Home (demo)'),
icon: const Icon(Icons.home),
label: const Text('Go Home'),
),
],
),
),
),
);
}
}
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
Layout only: a large 404 in displayLarge, using the theme’s primary color, over two lines of explanation and a Go Home button. With no AppBar there’s no back arrow, and the button only shows a demo SnackBar, leaving users on this screen. Nothing connects it to your router yet.
Adapting it
- Register
Error404as yourgo_routererrorBuilder, or asonUnknownRouteonMaterialApp. - Replace
_showDemoinonPressedto return to your home route, clearing the stack. - Accept the failed path as an
Error404parameter if you want to log it.