Support non-uniform Borders with a non-zero borderRadius

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)

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

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

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

What are your needs?

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.

Can you post an image showing how it should render?

Guess you can close this, right?

@Hixie

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?

@bramvbilsen

@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?

@jeroen-meijer

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

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.

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

The same is true for log printed information

It's never getting fixed. "Code looking bad"...? All code looks bad; our entire existence is to minimize the bad and make it readable for the next guy. Just write the code, wrap it in a widget, done. Who cares how it looks as long as it works and isn't a performance dog. No one's going to look at that one stupid hack and not hire you ever again because you found a way to do a thing that the language and platform didn't do intrinsically - which is also 100% of our job. Our entire job is to make the Taj Mahal from legos. Even the Taj Mahal has areas that will always need work. If you're stressing about code that doesn't "look good" doing a custom border, I'd say you solved all the real problems and you're just being pedantic.

Yeah totally agree with you on that man.

No issues I will create a package myself fixing the caveats in above solutions and then I will share it with the community.

Assembly is easy as well when you know what you're doing. But we choose higher level abstractions for a good reason. Form controls development & styling them is something should be most feature rich and customizable.

The frustration comes from the fact, there is a concept of controlling specific borders and their radius but it doesn't work.

Pixel shifting, masking, overlaying, cropping when dealing with a button doesn't give you a sense of confidence that your solution would be working correctly and perform well on all platforms.

A hack here, another there... Here is a special case... there is shim... this is border-box, that is content-box.

A new version came out! Oh do I need to revisit my hacks? Or should I just leave them as I don't remember anyway what I was trying to achieve there...

any updates here ? 5 years long...

any updates here ? 5 years long...

Check this package out: https://pub.dev/packages/morphable_shape

Still not fixed?

It's strange that this issue is yet to get a fix after 5 years.

Welcome to Flutter development. :\

…

On Jan 4, 2023, at 11:03 AM, TheStrongest ***@***.***> wrote: It's strange that this issue is yet to get a fix after 5 years. — Reply to this email directly, view it on GitHub <#12583 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZHS6O354DFE2R2C6WJLF3WQWNMPANCNFSM4D7QTF7A>. You are receiving this because you were mentioned.

I just want to note that this issue is with BoxBorder, but there is also ShapeBorder that does not have this issue (I am using that on another project that I want the shape rounded on 2 corners). So perhaps that is usable for some of the use cases.

is there any updates on this issue?

For hiding some borders, Stack with white layer above saved my month.

A very old-school css solution from ancient times when rounded corners were made by 4 background images in 4 divs.
The code above gives top-rounded container with no bottom border:

Container(
                  color: AppColors.appBar,
                  child: Container(
                    height: 20,
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.vertical(top: Radius.circular(22), bottom: Radius.circular(0)),
                      // color: AppColors.scaffold
                    ),
                    child: Container(
                      height: 20,
                      margin: const EdgeInsets.only(top: 1, left: 1, right: 1),
                      decoration: const BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.vertical(top: Radius.circular(20), bottom: Radius.circular(0)),
                        // color: AppColors.scaffold
                      ),
                    ),
                  ),
                ),

I (finally) made a package for a shape border that does non-uniform borders (multiple widths, same color). https://github.com/bernaferrari/non_uniform_border

I'm also submitting a PR for adding it into Border (BoxDecoration). I don't like, I prefer ShapeDecoration, but then you can choose between using my package or BoxDecoration.

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.

Navigation Menu

Repository navigation

Support non-uniform Borders with a non-zero borderRadius #12583

Flutter Doctor

55 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support non-uniform Borders with a non-zero borderRadius #12583

Description

Flutter Doctor

Activity

Hixie commented on Oct 17, 2017

Hixie commented on Oct 17, 2017

theobouwman commented on Oct 17, 2017

Hixie commented on Oct 17, 2017

theobouwman commented on Oct 17, 2017

Hixie commented on Oct 17, 2017

jeroen-meijer commented on May 8, 2018

bramvbilsen commented on May 9, 2018

jeroen-meijer commented on May 10, 2018

bramvbilsen commented on May 10, 2018

nokia6290 commented on Sep 10, 2018

TaroXin commented on Sep 18, 2018

55 remaining items

chaudharydeepanshu commented on Aug 3, 2022

cristian-eriomenco commented on Aug 16, 2022

akarabach commented on Oct 11, 2022

KevinVan720 commented on Oct 11, 2022

nzkn commented on Jan 2, 2023

TheStrongest commented on Jan 4, 2023

chornbe commented on Jan 4, 2023

dalewking commented on Jan 4, 2023

ilyosbekkk commented on Feb 5, 2023

eldarkk commented on Feb 8, 2023

ak1987 commented on Feb 10, 2023

bernaferrari commented on Mar 4, 2023

github-actions commented on Apr 7, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions