Hello Flutter Developers👋
Areeba Farooq
Posted on June 30, 2022
🛡️ Did you know you can customize the Flutter red-screen of death?😈
We understand that facing the red screen of death can be terrifying and eye-boggling, so here’s a
Tip😃:
To customize the red screen of death, you can call the ‘ErrorWidget.builder( )’ widget in you void main( ) { } method and customize your red screen.
import 'package:flutter/material.dart';
import 'home.dart';
void main() {
ErrorWidget.builder = (FlutterErrorDetails details) => Material(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Image.asset("assets/error.png"),
const SizedBox(height: 20),
const Text(
'Error',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
Text(details.exceptionAsString(),
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.red,
fontSize: 18,
fontWeight: FontWeight.normal))
]))),
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'E-Learning App',
theme: ThemeData(
scaffoldBackgroundColor: Colors.grey[900],
primarySwatch: Colors.blue,
fontFamily: 'Urbanist',
),
home: const HomeScreen(),
);
}
}
Give it a try and let me know how it went!
Support Me:
💖 💪 🙅 🚩
Areeba Farooq
Posted on June 30, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related