Flutter: How to remove the divider lines in CupertinoDatePicker?

Issue

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,
          ),
        ),
      ),
    );
  }

Answered By – Slah Layouni

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *