如何在Flutter应用中获取屏幕尺寸？

Question

我在全屏模式下显示从云存储加载的图像。我可以提供一个参数来请求特定大小的图像URL，例如匹配最长的屏幕尺寸。这样，如果屏幕只有1334像素，我就不必加载1920px的图像。

如何获取屏幕尺寸以作为参数传递？

- Andrei Volgin

Answer 1

你可以使用 MediaQuery 类，结合关联的 MediaQueryData 来确定你的屏幕尺寸并获取正确的图像。你可以将 MediaQueryData.size 成员与一些预定义的屏幕尺寸进行比较，这将给出逻辑像素的数量。

例如，在小部件的构建方法中：

class MyWidget extends StatelessWidget {

  Widget build(BuildContext context) {
     // retrieve the mediaQuery data
     final mediaQueryData = MediaQuery.of(context);
     if (mediaQueryData.size < const Size(100.0, 100.0)) {
       // build small image.
     } else {
       // build big image.
     }
  }

}

- Jonah Williams

---

非常好。 显然，我可以简单地使用double size = mediaQueryData.size.longestSide * mediaQueryData.devicePixelRatio。 - Andrei Volgin

Answer 2

import 'package:flutter/material.dart';

class MyWork extends StatefulWidget {
  const MyWork({super.key});

  @override
  State<MyWork> createState() => _MyWorkState();
}

class _MyWorkState extends State<MyWork> {
  @override
  Widget build(BuildContext context) {
    int screenHeight = MediaQuery.of(context).size.height.toInt(); // remove .toInt() and convert type to double for extra precision
    int screenWidth = MediaQuery.of(context).size.width.toInt();
    return Scaffold(body: Center(child: Text("$screenHeight, $screenWidth")));
  }
}

- Fanisus