Flutter开发响应式Widget时返回Widget?不符合要求空安全错误如何解决

问题根因 #

• 你使用的@required是Flutter旧版本的可选注解，空安全规则下不会将参数标记为真正的非空必传，因此即使加了该注解，largeScreen依然属于可空类型
• LayoutBuilder的builder回调要求返回非空Widget类型，你现有代码中返回的可空Widget?不符合类型要求

修复方案 #

第一步：修正类属性与构造函数定义 #

将必须传入的largeScreen设为非空类型，使用Dart内置的required关键字标记必传，去掉旧的@required注解：

import 'package:flutter/material.dart';

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

class ResponsiveWidget extends StatelessWidget {
  // 大屏组件必传，设为非空；中、小屏组件可选可空
  final Widget largeScreen;
  final Widget? mediumScreen;
  final Widget? smallScreen;

  const ResponsiveWidget({
    Key? key,
    // 用Dart内置required关键字，无需加@前缀
    required this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  }) : super(key: key);

第二步：调整LayoutBuilder返回逻辑 #

由于largeScreen已经是非空类型，用?? fallback到largeScreen后返回值自动符合非空要求：

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

修改后两处报错都会消失，调用该组件时必须传入largeScreen参数，中、小屏组件可根据需求选择性传入。

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