Flutter：如何将StatelessWidget的mediumScreen、smallScreen设为可选参数？

要把mediumScreen和smallScreen从必填参数改成可选参数，核心是给参数设置默认值，同时适配Dart的空安全规则，以下是两种可行方案：

方案1：使用可空参数+默认null #

适合需要灵活控制是否传入参数，且能自行处理空值场景的情况：

class ResponsiveWidget extends StatelessWidget {
  final Widget? mediumScreen;
  final Widget? smallScreen;

  // 去掉required，给参数设置默认值null
  const ResponsiveWidget({super.key, this.mediumScreen, this.smallScreen});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          // 空值兜底，替换成你需要的默认布局
          return mediumScreen ?? const Center(child: Text("默认中等屏布局"));
        } else {
          return smallScreen ?? const Center(child: Text("默认小屏布局"));
        }
      },
    );
  }
}

方案2：设置默认Widget作为 fallback #

适合有固定默认布局，不想处理空值的场景：

class ResponsiveWidget extends StatelessWidget {
  final Widget mediumScreen;
  final Widget smallScreen;

  // 给参数设置默认的Widget实例
  const ResponsiveWidget({
    super.key,
    this.mediumScreen = const DefaultMediumLayout(),
    this.smallScreen = const DefaultSmallLayout(),
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return constraints.maxWidth > 600 ? mediumScreen : smallScreen;
      },
    );
  }
}

// 定义默认布局Widget
class DefaultMediumLayout extends StatelessWidget {
  const DefaultMediumLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text("默认中等屏布局"));
  }
}

class DefaultSmallLayout extends StatelessWidget {
  const DefaultSmallLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text("默认小屏布局"));
  }
}

注意事项 #

• 用可空参数时，必须在build方法里处理空值，避免运行时异常
• 如果使用默认Widget，建议给默认Widget加上const构造，保持组件的性能优化

内容的提问来源于stack exchange，提问作者Thuận Nguyễn hữu