the method 'toDouble()' was called on a null in flutter

Question

So I am trying to get buttons like this as in the library so so I tried to make the button as done in this library but I am getting an error I tried looking for the cause and found that it happens when I don't define some value in the double value so I did that but then also I was getting the same error.

ui_helper.dart

import 'dart:core';

/// ui standard
final standardWidth = 375.0;
final standardHeight = 815.0;

/// late init
double screenWidth;
double screenHeight;

/// scale [height] by [standardHeight]
double realH(double height) {
assert(screenHeight != 0.0);
return height / standardHeight * screenHeight;
}

// scale [width] by [ standardWidth ]
double realW(double width) {
 assert(screenWidth != 0.0);
 return width / standardWidth * screenWidth;
}

MapButton.dart

class MapButton extends StatelessWidget {
final double currentSearchPercent;
final double currentExplorePercent;

 final double bottom;
final double offsetX;
final double width;
final double height;

final IconData icon;
final Color iconColor;
final bool isRight;
final Gradient gradient;

const MapButton(
  {Key key,
    this.currentSearchPercent,
    this.currentExplorePercent,
    this.bottom,
    this.offsetX,
    this.width,
    this.height,
    this.icon,
    this.iconColor,
    this.isRight = true,
    this.gradient})
  : assert(currentExplorePercent != null),
    assert(currentExplorePercent != null),
    assert(bottom != null),
    assert(offsetX != null),
    assert(width != null),
    assert(height != null),
    assert(icon != null),
    super(key: key);

@override
Widget build(BuildContext context) {
return Positioned(
  bottom: realH(bottom),
  left: !isRight ? realW(offsetX * (currentExplorePercent + currentSearchPercent)) : null,
  right: isRight ? realW(offsetX * (currentExplorePercent + currentSearchPercent)) : null,
  child: Opacity(
    opacity: 1 - (currentSearchPercent + currentExplorePercent),
    child: Container(
      width: realW(width),
      height: realH(height),
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: realW(17)),
      child: Icon(
        icon,
        size: realW(34),
        color: iconColor ?? Colors.black,
      ),
      decoration: BoxDecoration(
          color: gradient == null ? Colors.white : null,
          gradient: gradient,
          borderRadius: isRight
              ? BorderRadius.only(bottomLeft: Radius.circular(realW(36)), topLeft: Radius.circular(realW(36)))
              : BorderRadius.only(bottomRight: Radius.circular(realW(36)), topRight: Radius.circular(realW(36))),
          boxShadow: [
            BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.3), blurRadius: realW(36)),
          ]),
    ),
  ),
);
}
}

So these are the class I used from this library but it is not working so far. I called it like this

MapButton(
        currentExplorePercent: currentExplorePercent,
        currentSearchPercent: currentSearchPercent,
        bottom: 243.0,
        offsetX: -71.0,
        width: 71.0,
        height: 71.0,
        isRight: false,
        icon: Icons.layers,
      ),

I tried to run the library it was working fine. any help how to fix this.

Answer 1

Main issue is that you are not providing screenWidth and screenHeight value. if you provide it will solve your issue.

When your widget called it will call realH but screenWidth's value is not define, so it can not calculate value and it can not return value.

  screenWidth = MediaQuery.of(context).size.width; 
screenHeight = MediaQuery.of(context).size.height;
 if (screenWidth > standardWidth) { 
   screenWidth = standardWidth;
  } 
 if (screenHeight > standardHeight) { 
    screenHeight = standardHeight;
 }