Support non-uniform Borders with a non-zero borderRadius

[theobouwman]

flutter/packages/flutter/lib/src/painting/box_border.dart

Line 462 in 9ce3ba3

assert(borderRadius == null, 'A borderRadius can only be given for uniform borders.');

new BoxDecoration(
    color: color,
    border: new Border(
      left: new BorderSide(color: color),
      top: new BorderSide(color: color),
      bottom: new BorderSide(color: color),
    ),
    borderRadius: new BorderRadius.only(
      topLeft: new Radius.circular(radius),
      bottomLeft: new Radius.circular(radius),
    ),
)

Why can't I do this.

I get this error:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
A borderRadius can only be given for uniform borders.
'package:flutter/src/painting/box_border.dart': Failed assertion: line 462 pos 12: 'borderRadius ==
null'

Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new

When the exception was thrown, this was the stack:

The following RenderObject was being processed when the exception was fired:
RenderDecoratedBox#9302a relayoutBoundary=up6
creator: DecoratedBox ← Container ← Listener ← _GestureSemantics ← RawGestureDetector ←
GestureDetector ← _CupertinoSegmentControlItem ← Row ← Padding ← Column ← CupertinoSegmentControl
← MediaQuery ← ⋯
decoration: BoxDecoration
RenderPadding#09d88 relayoutBoundary=up7 NEEDS-PAINT
RenderParagraph#85b48 relayoutBoundary=up8 NEEDS-PAINT

Flutter Doctor

[✓] Flutter (on Mac OS X 10.13 17A405, locale en-GB, channel master)
    • Flutter at /Users/theobouwman/Development/flutter
    • Framework revision ad72c78342 (19 hours ago), 2017-10-16 10:58:39 -0700
    • Engine revision 7c4142808c
    • Tools Dart version 1.25.0-dev.11.0

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.1)
    • Android SDK at /Users/theobouwman/Library/Android/sdk
    • Platform android-26, build-tools 26.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] iOS toolchain - develop for iOS devices (Xcode 9.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.0, Build version 9A235
    • ios-deploy 1.9.2
    • CocoaPods version 1.3.1

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.2.5)
    • Flutter plugin version 17.0
    • Dart plugin version 172.4155.35

[✓] Connected devices
    • iPhone X • 6EE42D9C-C0E5-4E0B-AB0C-AC343B53C4EF • ios • iOS 11.0 (simulator)

[Hixie]

The first line of the error message gives you the answer: "A borderRadius can only be given for uniform borders."

[Hixie]

(The reason being, there's no real separation between the "top" and "left" borders if there's a "topLeft" corner.)

[theobouwman]

okay I understand. but how could I accomplish my needs?

[Hixie]

What are your needs?

[theobouwman]

I want to have a top, left and bottom border with a topleft and bottomleft borderRadius.
The cupertino_segement_control plugin I created (https://github.com/theobouwman/flutter_cupertino_segment_control/blob/master/lib/cupertino_segment_control.dart#L19) is currently limited to 3 items because I cannot find a way to create a BoxDecoration with 3 borders and 2 rounded corners.

[Hixie]

Can you post an image showing how it should render?

[jeroen-meijer]

Guess you can close this, right?

[bramvbilsen]

Is it something like this that you want?

I've created a CustomRoundedRectangleBorder class for this, perhaps it'd be nice to have this in Flutter.
@Hixie Do you think that'd go through as a PR?

[jeroen-meijer]

@bramvbilsen That'd be nice. PR will get a higher chance of approval if you add some documentation. Is this CustomRoundedRectangleBorder available anywhere, on your git perhaps?

[bramvbilsen]

@jeroen-meijer I've actually filed the PR yesterday. You can find it here: #17441

[nokia6290]

Has this been fixed?

I've encountered a similar problem. Except in my case I was creating custom BorderRadius with border at the same time and my text would disappear thats placed inside the Container. Eventually found a solution by leaving just BorderRadius and removing Border.

My code is:

                      decoration: BoxDecoration(
                        color: Colors.lightBlueAccent,
//                        border: Border(bottom: BorderSide(width: 1.0)),
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(15.0),
                          topLeft: Radius.circular(15.0),
                          bottomRight: Radius.circular(0.0),
                          bottomLeft: Radius.circular(0.0),
                        ),
                      ),

I was not aware, but you can only have either border or borderRadius at the same time. If both are placed you get a conflict.

Maybe this will help someone.

[TaroXin]

Is there a solution? I think I have the same problem

The same is true for log printed information