Flutter web：获取全屏尺寸 - 而不是 window 尺寸

Question

我的 Flutter 桌面 Web 应用程序很复杂 ui 太棘手了，无法做出响应。所以我想把它放在一个 FittedBox 中，如果用户使浏览器 window 变小，它只会缩小整个应用程序。

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 仅获得初始 window 大小。因此，如果该应用程序在全屏浏览器中启动，则效果很好，但如果该应用程序在小浏览器中启动，则无法正常工作。 MediaQuery.of(context).size.width 只获取当前屏幕尺寸。

有没有办法获取桌面物理屏幕尺寸？

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

Flutter web：获取全屏尺寸 - 而不是 window 尺寸

Flutter web: get full screen size - not window size

flutter

dart

flutter-layout

flutter-web

flutter-getx