Search code examples
flutterlayoutflutter-layoutheightflutter-web

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


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,);
  }
}


Solution

  • 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,);
      }
    }