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?

Yes, it is absolutely right to follow on-screen suggestions to fix errors. Take a look into the null safety guide for understanding it better and working with it. — Neeraj
Make widthImage and heightImage nullable looks okay. Making pathImage nullable looks wrong since you later unconditionally use pathImage!, which asserts that pathImage is not null. That would result in a runtime crash if pathImage was not set. A more appropriate fix would be: A. make pathImage non-nullable and make it a required argument to the constructor; B. check if pathImage is null and conditionally use AssetImage; C. make pathImage non-nullable and initialize it to some default, non-null value if not provided as a constructor argument. — jamesdlin

DNS DNS · Accepted Answer · 2021-09-06T04:40:31

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

null safety error when creating Flutter classes and widgets

1 Answers