Flutter web：获取全屏大小 - 不是窗口大小

Posted 2023-03-07

【中文标题】Flutter web：获取全屏大小 - 不是窗口大小

【英文标题】：Flutter web: get full screen size - not window size

【发布时间】：2021-12-28 10:56:06

【问题描述】：

我的 Flutter 桌面 Web 应用程序具有复杂的用户界面，难以做出响应。所以我想把它放在FittedBox 中，如果用户缩小浏览器窗口，它只会缩小整个应用程序。

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.'),
    );
  

但是Get.width 和WidgetsBinding.instance.window.physicalSize.width 只能获取初始窗口大小。因此，如果应用程序在全屏浏览器中启动，则效果很好，但如果应用程序在小型浏览器中启动，则无法正常工作。 MediaQuery.of(context).size.width 只获取当前屏幕尺寸。

有没有获得桌面物理屏幕尺寸的方法？

【问题讨论】：

如果要监听维度的变化，基本上需要重新构建UI。您可以使用布局生成器，然后将其约束用作宽度和高度。每次尺寸发生变化时，布局构建器都会重建其子级。只需将您的 UI 包装在 Layout Builder 中并使用布局构建器的约束。

【参考方案1】：

你需要导入 import 'dart:html';

然后window.screen?.width 和window.screen?.height 会给你物理屏幕尺寸

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