如何在 flutter 中使用可为空的小部件？

Question

我想让我的屏幕响应。因此我写了这个 ResponsiveWidget:

import 'package:flutter/material.dart';

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

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

  const ResponsiveWidget(
      {Key? key,
        required this.largeScreen,
         this.mediumScreen,
         this.smallScreen})
      : super(key: key);

static bool isSmallScreen(BuildContext context)=>
    MediaQuery.of(context).size.width<smallScreenSize;

static bool isMediumScreen(BuildContext context)=>
    MediaQuery.of(context).size.width>=mediumScreenSize &&
    MediaQuery.of(context).size.width<largeScreenSize;

static bool isLargeScreen(BuildContext context)=>
    MediaQuery.of(context).size.width>=largeScreenSize;

  @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)
          {
            if (mediumScreen==null)
              {return largeScreen;}
            else
              {return mediumScreen;}
          }
        else if (_width<=smallScreenSize)
        {
          if (smallScreen==null)
          {return largeScreen;}
          else
          {return smallScreen;}
        }
      }

    );
  }
}

...现在我收到“return mediumScreen”和“return smallScreen”的错误（因为它们可以为空）

return 类型 'Widget?' 不是闭包上下文所要求的 'Widget'。

如何为此小部件添加默认 return 值，以便我可以将某些屏幕用作可选参数？

Answer 1

用

解决了这个问题

@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 ?? Container();
          }
        else if (_width<=smallScreenSize)
        {
          return smallScreen ?? Container();
        }
        else return largeScreen;
      }

    );
  }

如何在 flutter 中使用可为空的小部件？

How to work with nullable widgets in flutter?

web-applications

dart

flutter

responsive