Flutter web set a white screen at height less than 500px - flutter

Question

I would like to set a white screen when someone resizes the height of their tab to a small size
It works for the initial route however, I would like to do this for all my screens
Here is my code
class _ExcelitState extends State<Excelit> {
#override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
key: navigatorKey,
debugShowCheckedModeBanner: false,
onUnknownRoute: (RouteSettings settings) {
return MaterialPageRoute<void>(
settings: settings,
builder: (BuildContext context) =>
const Scaffold(body: Center(child: Text('Page Not Found!!!'))),
);
},
// navigatorObservers: [observer],
routes: {
'/': (context) => (kIsWeb && setHeight(context, 0.01) <= 5)
? const EmptyScreen()
: const LoginScreen(),
},
);
}
}
class EmptyScreen extends StatelessWidget {
const EmptyScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(backgroundColor: kBackgroundColor,);
}
}

Answer 1

I did the following:
IndexedStack would save the state and once the screen height on the web is below ~500px I change to the empty screen
yet I had to change all my Scaffolds to CustomScaffold
import 'package:excelit/constants/constants.dart';
import 'package:excelit/main.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class CustomScaffold extends StatelessWidget {
const CustomScaffold({Key? key, required this.widget}) : super(key: key);
final Widget widget;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kBackgroundColor,
resizeToAvoidBottomInset: true,
body: IndexedStack(
index: (kIsWeb && setHeight(context, 0.01) <= 5) ? 1 : 0,
children: [
widget,
const EmptyScreen(), //if height is reduced below ~500px show white screen
],
),
);
}
}
class EmptyScreen extends StatelessWidget {
const EmptyScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(backgroundColor: kBackgroundColor,);
}
}