Flutter响应式布局遇Expected a value of type 'Widget'得Null报错如何解决

• 你声明的largeScreen、mediumScreen、smallScreen三个属性都是可空类型Widget?，未做非空兜底处理，当使用as Widget强转时如果对应属性为null，就会抛出类型不匹配的错误
• LayoutBuilder的builder方法要求必须返回非空的Widget，原有逻辑没有覆盖所有属性都为null的场景

可以按需选择以下两种修复方向：

方案1：将兜底参数设为必填非空 #

最稳妥的方式是把largeScreen设为必填非空参数，作为所有屏幕尺寸的兜底展示，修改后代码如下：

import 'package:flutter/material.dart';

const int largeScreenSize = 1366;
const int mediumScreenSize = 768;
const int smallScreenSize = 360;
const int customScreenSize = 1100;

class Responsiveness extends StatelessWidget {
   // largeScreen改为必填非空，其余两个参数保留可空
   final Widget largeScreen;
   final Widget? mediumScreen;
   final Widget? smallScreen;

   const Responsiveness({
    super.key,
    required this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  });

   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(builder: (context, constraints) {
       double _width = constraints.maxWidth;
        if (_width >= largeScreenSize) {
         return largeScreen;
       } else if (_width >= mediumScreenSize && _width < largeScreenSize) {
         // 中等屏布局为空时默认返回大屏布局，本身非空无需强转
         return mediumScreen ?? largeScreen;
       } else {
         // 小屏布局为空时默认返回大屏布局
         return smallScreen ?? largeScreen;
       }
     });
   }
 }

方案2：增加空值兜底组件 #

如果你希望三个参数都保留可选，可以在判断逻辑最后加一个非空的兜底组件，比如空白占位组件或者错误提示组件：

import 'package:flutter/material.dart';

const int largeScreenSize = 1366;
const int mediumScreenSize = 768;
const int smallScreenSize = 360;
const int customScreenSize = 1100;

class Responsiveness extends StatelessWidget {
   final Widget? largeScreen;
   final Widget? mediumScreen;
   final Widget? smallScreen;

   const Responsiveness({
    super.key,
    this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  });

   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(builder: (context, constraints) {
       double _width = constraints.maxWidth;
        if (_width >= largeScreenSize) {
         return largeScreen ?? const SizedBox.shrink();
       } else if (_width >= mediumScreenSize && _width < largeScreenSize) {
         return mediumScreen ?? largeScreen ?? const SizedBox.shrink();
       } else {
         return smallScreen ?? mediumScreen ?? largeScreen ?? const SizedBox.shrink();
       }
     });
   }
 }

• 不要随意使用as强转可空类型，优先用??做空值判断，避免类型转换异常
• StatelessWidget建议加上super.key参数，符合新版Flutter的开发规范

内容的提问来源于stack exchange，提问作者Shayan Ali