Search code examples
flutterflutter-layout

How to remove Grey box from Picker Flutter widget


I am using flutter_picker: ^2.0.0 plugin. And could not find option to remove grey box from Picker.

Here is my code :-

Picker(
      itemExtent: 50,
      magnification: 1.4,
      hideHeader: true,
      adapter: _picAdapterLB,
      selecteds: [_selectedWeightLb],
      height: 200,
      textStyle: MyTextStyle.pickerItem,
      selectedTextStyle: MyTextStyle.pickerSelectedItem,
      onSelect: (Picker picker, int index, List<int> tmp) {
        setState(() {
          _selectedWeight = picker.adapter.toString();
          _selectedWeightUnit = AppStrings.WEIGHT_LB;
        });
      },
    ).makePicker();

enter image description here

Thanks in advance.


Solution

  • You can modify source code Picker.dart line 497
    and add selectionOverlay: CupertinoPickerDefaultSelectionOverlay(background: Colors.transparent,),
    https://github.com/yangyxd/flutter_picker/blob/00833be40cf63e11bcf9f534f1d3a7e9ed19f030/lib/Picker.dart#L497
    code snippet

    var _view = CupertinoPicker.builder(
                  selectionOverlay: CupertinoPickerDefaultSelectionOverlay(background: Colors.transparent,),
    

    Default background of CupertinoPickerDefaultSelectionOverlay is CupertinoColors.tertiarySystemFill

    class CupertinoPickerDefaultSelectionOverlay extends StatelessWidget {
    
      /// Creates an iOS 14 style selection overlay that highlights the magnified
      /// area (or the currently selected item, depending on how you described it
      /// elsewhere) of a [CupertinoPicker].
      ///
      /// The [background] argument default value is [CupertinoColors.tertiarySystemFill].
    

    working demo after modify source code

    enter image description here