Flutter - Custom gradient button turns white on Android device

Question

After developing my application in an emulator and tablet. I decided to try it out on one of the devices that our business is currently using (Casio VR-7000 running Android 4.2.2). I have discovered an issue with my custom gradient buttons as you can see in this image.

This is how it looks like in the emulator running on the same Android version.

Following is the code related to the button:

Container(
    width: width,
    height: height,
    decoration: BoxDecoration(
        gradient: gradient,
        borderRadius: borderRadius,
        border: Border.all(color: Colors.black)),
    child: Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onPressed,
        child: Center(
          child: child,
        ),
      ),
    )

As you can see it's just a container that takes a width and height with a Box Decoration that takes in a gradient. Following is how I use the button:

GradientButton(
    onPressed: () => buttonHandler(buttonValue),
    gradient: gradient ??
        const LinearGradient(colors: [
          Color.fromARGB(255, 17, 17, 17),
          Color.fromARGB(255, 27, 27, 27),
        ], begin: Alignment.topLeft, end: Alignment.bottomRight),
    child: Text(
      buttonValue,
      style: TextStyle(
        color: Colors.white,
        fontSize: deviceSize.height * 0.03,
      ),
    ))

I am not sure why this problem is only occurring on the Casio device and not inside of the emulator nor on the tablet. I was wondering if anyone has ever come across a similar issue and has found a solution for it.

Thank you for your suggestions!