[web]: BoxDecoration border doesn't render if borderRadius is set

[TheRealWelshCJ]

If borderRadius is set within the Container BoxDecoration then it overwrites a border in the same BoxDecoration.

 Container(
          height: 100,
          width: 100,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.orange, width: 2),
            borderRadius: BorderRadius.all(
               Radius.circular(10.0),
            ),
            color: Colors.green,
          ),
        ),

The code above is wrapped in a Row in the new flutter_web boiler plate.

In Chrome it looks like:

if I comment out the borderRadius, then in chrome I get:

 Container(
          height: 100,
          width: 100,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.orange, width: 2),
           // borderRadius: BorderRadius.all(
           //    Radius.circular(10.0),
           // ),
            color: Colors.green,
          ),
        ),

The border seems to be being over written by the borderRadius in flutter_web.

The same code (as the first code block) on Android, produces this:

Chrome Version: Version 76.0.3809.100 (Official Build) (64-bit)

Webdev Version: 2.3.0

Command: flutter pub global run webdev serve --launch-in-chrome --auto refresh

Flutter_Web:

 flutter_web:
    dependency: "direct main"
    description:
      path: "packages/flutter_web"
      ref: HEAD
      resolved-ref: "88a6325290b75326c072ae63bf3016e15a08fccc"
      url: "https://github.com/flutter/flutter_web"
    source: git
    version: "0.0.0"
  flutter_web_ui:
    dependency: "direct main"
    description:
      path: "packages/flutter_web_ui"
      ref: HEAD
      resolved-ref: "88a6325290b75326c072ae63bf3016e15a08fccc"
      url: "https://github.com/flutter/flutter_web"
    source: git
    version: "0.0.0"

[TheRealWelshCJ]

Potential duplicates:

#37121
#32893
#34201 (closed due to lack of information)

[ditman]

Checking

[ditman]

The problem is that drawDRRect checks if the inner rectangle (in this case, the inner side of the border) is contained within the outer rectangle (the outer side of the border), here.

It seems the check above is not correct, since it's not taking into account inner's radius when checking, so DRRects that have a "thin" border width compared to its border radius (less than ~1/3rd, on circular radii) will fail the check (and not render the border).

(For reference, this is the implementation of RRect.contains, which does take into account the normalized border radius to compute if a point is contained within the rrect)

[ditman]

The inner part is computed by calling .deflate on the outer part (by the width of the border).

Deflate just substracts from both the coordinates of the rectangle, and its corner radius.

I'm going to try a fix by changing the contains method by something that looks just at the coordinates of the rectangle and its radius.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.