[PROBLEM] decoration appearing over the number instead of below

[AishaTariq]

When I try adding a color to the selected value by using the parameter called 'decoration', the decoration appears over the text, (effectively hiding the number) rather than appearing under it

Code:

                    NumberPicker(
                      value: systolicValue - diastolicValue,
                      minValue: 20,
                      maxValue: 250,
                      onChanged: (value) {},
                      decoration: BoxDecoration(
                        color: Theme.of(context)
                            .colorScheme
                            .primary,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      selectedTextStyle: TextStyle(
                        fontSize: 24.0,
                        fontWeight: FontWeight.bold,
                        color: Theme.of(context).colorScheme.onPrimary,
                      ),
                    ),

Preview: (First two number pickers without decoration, third with decoration)

For simplicity, you can replace the variables with constant values to regenerate the issue:

                   NumberPicker(
                      value: 50,
                      minValue: 20,
                      maxValue: 250,
                      onChanged: (value) {},
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      selectedTextStyle: TextStyle(
                        fontSize: 24.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),

Preview: