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

usernIj81 0
Viewed 18

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,);
  }
}
height flutter-web layout flutter-layout flutter
1 Answers

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