null safety error when creating Flutter classes and widgets

Question

I am learning Flutter / Dart and when doing the exercise in this video I have encountered an error that from what I understand is due to the null-safety feature and because the example is from a previous version, the problem appears .

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;
  }
}

The parameter 'pathImage' can't have a value of 'null' because of its type, but the implicit default value is 'null'. Try adding either an explicit non-'null' default value or the 'required' modifier.

When reading these errors 1, 2, 3 about null-safety I thought about correcting the error that appears to me by adding "?" and "!" to my code, with which I validate that the errors no longer appear.

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;
  }
}

Is the way I have obtained to fix it correct? How should I create the variables of the OurImage class so that it does not generate this error?

Answer 1

you can make anything nullable but you should consider it in your whole code and every place that item is used. you need to provide a replaceable behavior for when the value is null (because that's possible due to nullablity)

for example for nullable attributes you should provide a default value like (1) or handle it in usages like (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;
  }
}