Flutter web: get full screen size - not window size

Question

My Flutter desktop web app has complex ui that would be too tricky to make responsive. So instead I want to put it in a FittedBox that will simply shrink the whole app if the user makes the browser window smaller.

class CustomPage extends StatelessWidget {
  final Widget child;

  const CustomPage({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetPlatform.isDesktop
          ? FittedBox(
              child: SizedBox(
                width: Get.width,
                height: Get.height,
                child: Center(child: child),
              ),
            )
          : Text('Sorry! This was only meant for desktop.'),
    );
  }
}

But Get.width and WidgetsBinding.instance.window.physicalSize.width only get the initial window size. So if the app is started in a full screen browser then this works great, but if the app is started in a small browser it doesn't work. MediaQuery.of(context).size.width only gets the current screen size.

Is there a way of getting a desktop physical screen size?

Answer 1

you need to import import 'dart:html';

then window.screen?.width and window.screen?.height
will give you physycal screen size

import 'dart:html';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(debugShowCheckedModeBanner: false, home: Home());
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: LayoutBuilder(builder: (context, c) {
        return Center(
          child: Text('${window.screen?.width}   ${window.screen?.height}'),
        );
      }),
    );
  }
}