刚好做过类似的需求，这其实分两步走：先拿到屏幕的实际尺寸，再把参数拼到图片URL里，最后全屏展示优化后的图片。我给你拆解一下具体实现：

1. 获取屏幕尺寸（含旋转适配） #

Flutter里最可靠的方式是用MediaQuery，它能直接拿到当前上下文的屏幕信息。不过要注意，必须在MaterialApp或WidgetsApp的子组件里使用，因为它依赖于这些组件提供的MediaQueryData。

如果你的页面是StatefulWidget，可以这么处理：

• 在didChangeDependencies里初始化屏幕尺寸（第一次加载时触发）
• 重写didChangeMetrics方法，监听屏幕旋转或尺寸变化，实时更新尺寸

2. 构造优化后的图片URL #

根据你云存储的规则，把屏幕的最长维度（宽度或高度的最大值）作为参数拼到URL里。比如如果你的存储服务支持?w=xxx参数指定宽度，就用这个；如果是?size=xxx就对应调整。

另外别忘了考虑设备像素比（devicePixelRatio）——比如iPhone的Retina屏幕，逻辑像素1334，但物理像素是2668，这时候请求物理像素尺寸的图片，显示出来会更清晰，不会模糊。

完整代码示例 #

下面是一个可直接用的全屏图片组件，包含加载、错误处理和屏幕旋转适配：

import 'package:flutter/material.dart';

class FullScreenOptimizedImage extends StatefulWidget {
  // 云存储图片的基础URL（不带尺寸参数）
  final String baseImageUrl;

  const FullScreenOptimizedImage({super.key, required this.baseImageUrl});

  @override
  State<FullScreenOptimizedImage> createState() => _FullScreenOptimizedImageState();
}

class _FullScreenOptimizedImageState extends State<FullScreenOptimizedImage> {
  late Size _screenSize;
  late double _devicePixelRatio;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 初始化屏幕尺寸和像素比
    final mediaQuery = MediaQuery.of(context);
    _screenSize = mediaQuery.size;
    _devicePixelRatio = mediaQuery.devicePixelRatio;
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 屏幕旋转/尺寸变化时更新状态
    setState(() {
      final mediaQuery = MediaQuery.of(context);
      _screenSize = mediaQuery.size;
      _devicePixelRatio = mediaQuery.devicePixelRatio;
    });
  }

  // 生成带尺寸参数的优化URL
  String get _optimizedImageUrl {
    // 计算物理像素下的最长维度
    final maxPhysicalDimension = (_screenSize.width > _screenSize.height 
        ? _screenSize.width 
        : _screenSize.height) * _devicePixelRatio;
    // 这里根据你的云存储API调整参数，示例用?w=xxx
    return '${widget.baseImageUrl}?w=${maxPhysicalDimension.toInt()}';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 去掉状态栏和导航栏，真正全屏
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: SizedBox.expand(
        child: Image.network(
          _optimizedImageUrl,
          fit: BoxFit.cover, // 铺满屏幕，保持比例
          loadingBuilder: (context, child, loadingProgress) {
            // 加载中显示进度条
            if (loadingProgress == null) return child;
            return const Center(child: CircularProgressIndicator.adaptive());
          },
          errorBuilder: (context, error, stackTrace) {
            // 加载失败显示提示
            return const Center(
              child: Text('图片加载失败，请稍后重试'),
            );
          },
        ),
      ),
    );
  }
}

几个关键注意点 #

• 云存储参数适配：不同服务商的参数格式不一样，比如Cloudinary用w_xxx，Firebase Storage需要用alt=media&w=xxx，你得对应调整URL拼接逻辑。
• 无上下文场景：如果一定要在没有上下文的地方拿屏幕尺寸，可以用WidgetsBinding.instance.platformDispatcher.views.first.physicalSize，但不如MediaQuery可靠，因为它不考虑当前视图的Insets（比如状态栏）。
• 性能优化：如果图片加载频繁，可以把计算好的URL缓存起来，避免每次build都重新拼接。

内容的提问来源于stack exchange，提问作者Andrei Volgin