Error when create a custom class with optional parameters in flutter

Question

I try to create an abstract class to create a responsive application, I follow someone in youtube, the person in the the video is using the same code as I do, but in my case I got an error in the constructor that said:

The parameter 'mobile' can't have a value of 'null' because of its type, but the implicit default value is 'null'.

I tried to change the mobile to optional final Widget? mobile; but in the condition build method I got another error:

The return type 'Widget?' isn't a 'Widget', as required by the closure's context.

Code:

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

  const ResponsiveWidget({Key? key, this.mobile, this.tablet, this.desktop})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraint) {
      if (constraint.maxWidth < 768) {
        return mobile; // <----------- second error here
      } else {
        return desktop;
      }
    });
  }
}

and then we can use:

body: SafeArea(
  child: ResponsiveWidget(
    mobile: Column(
      children: [buildContainer(), buildText()],
    ),
    desktop: Row(
      children: [buildContainer(), buildText()],
    ),
  ),
),

More details:

Even when I try to check if my widget is null or not and return a default widget for example :

return this.mobile != null ? mobile : Container();

I got an error:

The return type 'Widget?' isn't a 'Widget', as required by the closure's context.

Is there any trick to avoid this issue please ?

Basher Sarkar · Accepted Answer · 2021-07-11 16:28:30Z

1

Add question(?) mark to make a parameter nullable and at implementation use Exclamation_Mark(!). See changes below, I overwrite your code with mark.

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget {
  final Widget? mobile; <--------- nullable mark
  final Widget? tablet; <--------- nullable mark
  final Widget? desktop; <--------- nullable mark

  const ResponsiveWidget({Key? key, this.mobile, this.tablet, this.desktop})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraint) {
      if (constraint.maxWidth < 768) {
        return mobile!; // <--------- nullable mark
      } else {
        return desktop!; // <--------- nullable mark
      }
    });
  }
}

answered Jul 11, 2021 at 16:28

Basher Sarkar

1163 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Youcef LAIDANI Over a year ago

(!) solve the issue, but it is very weird, how the same code not work with me! maybe we I use a different version of the person in the video. Thank you for your answer

Kamlendra Pandey · Accepted Answer · 2021-07-11 16:32:11Z

The problem is, LayoutBuilder can not return null in place of widget, So you have to mark these widget as required in constructor Or accordingly you can handle the null case for builder. Here is the code

 class ResponsiveWidget extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

  const ResponsiveWidget({Key? key, required this.mobile, required this.tablet, required this.desktop})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraint) {
      if (constraint.maxWidth < 768) {
        return mobile; // <----------- second error here
      } else {
        return desktop;
      }
    });
  }
}

Collectives™ on Stack Overflow

Error when create a custom class with optional parameters in flutter

Code:

More details:

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code:

More details:

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related