创建 Flutter 类和小部件时出现 null 安全错误答案

【问题标题】：null safety error when creating Flutter classes and widgets创建 Flutter 类和小部件时出现 null 安全错误
【发布时间】：2021-11-03 05:02:01
【问题描述】：

我正在学习 Flutter / Dart，在此 video 中进行练习时遇到了一个错误，据我所知，这是由于 null-safety 功能，并且因为示例来自以前的版本，所以出现了问题.

import 'package:flutter/material.dart';

class OurImage extends StatelessWidget {
  final String pathImage;
  final double widthImage;
  final double heightImage;
  OurImage({this.pathImage, this.heightImage, this.widthImage});

  @override
  Widget build(BuildContext context) {
    final photo = Container(
      width: this.widthImage,
      height: this.heightImage,
      margin: EdgeInsets.only(right: 20.0),
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(this.pathImage), fit: BoxFit.cover)),
    );

    return photo;
  }
}

参数“pathImage”的值不能为“null”，因为它类型，但隐含的默认值为“null”。尝试添加一个显式非“null”默认值或“必需”修饰符。

在阅读1、2、3 关于空安全性的这些错误时，我想通过添加“？”来纠正出现在我身上的错误。和 ”！”到我的代码，我用它来验证错误不再出现。

import 'package:flutter/material.dart';

class OurImage extends StatelessWidget {
  final String? pathImage; //change here
  final double? widthImage; //change here
  final double? heightImage; //change here
  OurImage({this.pathImage, this.heightImage, this.widthImage});

  @override
  Widget build(BuildContext context) {
    final photo = Container(
      width: this.widthImage,
      height: this.heightImage,
      margin: EdgeInsets.only(right: 20.0),
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(this.pathImage!), fit: BoxFit.cover)), //change here
    );

    return photo;
  }
}

我获得的修复方法是否正确？我应该如何创建 OurImage 类的变量，使其不会产生此错误？

【问题讨论】：

是的，按照屏幕上的建议修复错误是绝对正确的。查看 null 安全指南以更好地理解和使用它。
使 widthImage 和 heightImage 可以为空看起来没问题。将pathImage 设为可空看起来是错误的，因为您稍后无条件地 使用pathImage!，它断言pathImage 是不是 null。如果未设置 pathImage，这将导致运行时崩溃。更合适的解决方法是： A. 使 pathImage 不可为空，并将其作为构造函数的 required 参数； B. 检查pathImage 是否为null 并且有条件地 使用AssetImage； C. 使pathImage 不可为空并将其初始化为某个默认的非null 值（如果未作为构造函数参数提供）。

标签： flutter class dart widget dart-null-safety

【解决方案1】：

您可以使任何内容为空，但您应该在整个代码以及使用该项目的每个地方都考虑到它。当值为空时，您需要提供可替换的行为（因为这可能是由于可空性）

例如，对于可为空的属性，您应该提供一个像 (1) 这样的默认值，或者在像 (2) 这样的用法中处理它

(1)

import 'package:flutter/material.dart';

class OurImage extends StatelessWidget {
  final String? pathImage; //change here
  final double? widthImage; //change here
  final double? heightImage; //change here
  OurImage({this.pathImage = 'default image path', this.heightImage = 100, this.widthImage = 100});

  @override
  Widget build(BuildContext context) {
    final photo = Container(
      width: this.widthImage,
      height: this.heightImage,
      margin: EdgeInsets.only(right: 20.0),
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(this.pathImage), fit: BoxFit.cover)), //change here
    );

    return photo;
  }
}

(2)

import 'package:flutter/material.dart';

class OurImage extends StatelessWidget {
  final String? pathImage; //change here
  final double? widthImage; //change here
  final double? heightImage; //change here
  OurImage({this.pathImage, this.heightImage, this.widthImage});

  @override
  Widget build(BuildContext context) {
    final photo = Container(
      width: this.widthImage ?? 100,
      height: this.heightImage ?? 100,
      margin: EdgeInsets.only(right: 20.0),
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(this.pathImage ?? 'default image path'), fit: BoxFit.cover)), //change here
    );

    return photo;
  }
}

【讨论】：