为网站创建负责任的布局

Question

我想创建一个与颤振网站。总之，我在编写布局代码时遇到了一些问题。

我想有一个负责任的布局，所以我试图找到最常见的解决方案移动，平板电脑和笔记本电脑。这个决议应该帮助我决定什么时候屏幕大小是小的，中型的还是大的。

我最近开始了这个项目，所以我还是个初学者，希望你们能帮我搞清楚，如何解决这个错误信息。

目前我遇到了问题，我从下面的代码中得到了这些错误消息：

   lib/helpers/responsiveness.dart:16:14: Error: The parameter 'largeScreen' can't have a value of 'null' because of its type 'Widget', but the implicit default value is 'null'.
 - 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('../flutter/packages/flutter/lib/src/widgets/framework.dart').
Try adding either an explicit non-'null' default value or the 'required' modifier.
        this.largeScreen,
             ^^^^^^^^^^^
lib/helpers/responsiveness.dart:17:14: Error: The parameter 'mediumScreen' can't have a value of 'null' because of its type 'Widget', but the implicit default value is 'null'.
 - 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('../flutter/packages/flutter/lib/src/widgets/framework.dart').
Try adding either an explicit non-'null' default value or the 'required' modifier.
        this.mediumScreen,
             ^^^^^^^^^^^^
lib/helpers/responsiveness.dart:18:14: Error: The parameter 'smallScreen' can't have a value of 'null' because of its type 'Widget', but the implicit default value is 'null'.
 - 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('../flutter/packages/flutter/lib/src/widgets/framework.dart').
Try adding either an explicit non-'null' default value or the 'required' modifier.
        this.smallScreen,
             ^^^^^^^^^^^
lib/helpers/responsiveness.dart:47:18: Warning: Operand of null-aware operation '??' has type 'Widget' which excludes null.
 - 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('../flutter/packages/flutter/lib/src/widgets/framework.dart').
          return mediumScreen ?? largeScreen;  //if medium screen is null then return large screen
                 ^
lib/helpers/responsiveness.dart:50:16: Warning: Operand of null-aware operation '??' has type 'Widget' which excludes null.
 - 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('../flutter/packages/flutter/lib/src/widgets/framework.dart').
        return smallScreen ?? largeScreen;    //if small screen is null then return large screen
               ^
Failed to compile application.

这里我的代码：

import 'package:flutter/material.dart';

const int largeScreenSize = 1366;     //laptop resolution
const int mediumScreenSize = 768;     //Tablet resolution
const int smallScreenSize = 360;      //mobile resolution
const int customScreenSize = 1100;    //most common custom resolution

class ResponsiveWidget extends StatelessWidget {
  final Widget largeScreen;
  final Widget mediumScreen;
  final Widget smallScreen;
  //final Widget customScreen;

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

static bool isSmallScreen (BuildContext context) =>       //smaller than smallScreenSize = small screen
    MediaQuery.of(context).size.width < smallScreenSize;

static bool isMediumScreen (BuildContext context) =>      //larger or equal than mediumScreenSize but  smaller than largeScreenSize = medium screen
    MediaQuery.of(context).size.width >= mediumScreenSize &&
    MediaQuery.of(context).size.width < largeScreenSize;

static bool isLargeScreen (BuildContext context) =>      //larger or equal than largeScreen = large screen
    MediaQuery.of(context).size.width >= largeScreenSize;

static bool isCustomScreen (BuildContext context) =>    //everything between medium and custom screen size is custom screen size
    MediaQuery.of(context).size.width >= mediumScreenSize &&
    MediaQuery.of(context).size.width <= customScreenSize;


  @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;  //if medium screen is null then return large screen
        }
        else {
        return smallScreen ?? largeScreen;    //if small screen is null then return large screen
      }
    });
  }
}

Answer 1

根据构造函数，必须提供所有三种不同的屏幕大小。

 final Widget largeScreen;
  final Widget mediumScreen;
  final Widget smallScreen;

如果没有可空运算符，?意味着您必须提供一个值

尝试添加一个显式的非“null”默认值或“必需”修饰符。this.largeScreen，

在本例中，您可以通过使小部件为空来解决这个问题。

 final Widget? largeScreen;
  final Widget? mediumScreen;
  final Widget? smallScreen;

这里还有一个使用LayoutBuilder的响应性更好的小部件

// ignore_for_file: type_annotate_public_apis, sort_constructors_first

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget {
  final Widget? largeScreen;
  final Widget? mediumScreen;
  final Widget? smallScreen;
  const ResponsiveWidget({
    Key? key,
    this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  }) : super(key: key);
  static bool isSmallScreen(BuildContext context) {
    return MediaQuery.of(context).size.width < 800;
  }

  static bool isLargeScreen(BuildContext context) {
    return MediaQuery.of(context).size.width > 800;
  }

  static bool isMediumScreen(BuildContext context) {
    return MediaQuery.of(context).size.width >= 800 &&
        MediaQuery.of(context).size.width <= 1200;
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 1200) {
          return Container(child: largeScreen ??smallScreen);
        } else if (constraints.maxWidth <= 1200 &&
            constraints.maxWidth >= 800) {
          return Container(child: mediumScreen??smallScreen);
        } else {
          return smallScreen!;
        }
      },
    );
  }
}

Answer 2

对于颤振中的响应布局，您可以使用flutter_bootstrap包。这个包太好了，而且很容易使用。检查此页面引导