flutterflutter-cupertinocupertinopicker

Flutter: How to remove the divider lines in CupertinoDatePicker?


This view is achieved by creating custom CupertinoDatePicker

While doing a coding walkthrough, I've never find a way to get rid of the divider lines. How can I achieve this? For more info, I just created a new custom class by just copying the CupertinoDatePicker class.


Solution

  • Since you copied the CupertinoDatePicker class just remove the border in the _buildMagnifierScreen() method in picker.dart from /src/cupertino/

    /// Draws the magnifier borders.
      Widget _buildMagnifierScreen() {
        final Color resolvedBorderColor = CupertinoDynamicColor.resolve(_kHighlighterBorder, context);
    
        return IgnorePointer(
          child: Center(
            child: Container(
              decoration: BoxDecoration(
                // remove this attribute
                border: Border(
                  top: BorderSide(width: 0.0, color: resolvedBorderColor),
                  bottom: BorderSide(width: 0.0, color: resolvedBorderColor),
                ),
              ),
              constraints: BoxConstraints.expand(
                height: widget.itemExtent * widget.magnification,
              ),
            ),
          ),
        );
      }