A borderRadius can only be given for uniform borders

Question

I am getting a warning when using following code but my app is running fine:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during paint():
A borderRadius can only be given for uniform borders.
'package:flutter/src/painting/box_border.dart':
Failed assertion: line 510 pos 12: 'borderRadius == null'

Here is my code:

           Container(
              height: screenSize.height*.13,
              width: AppSize.medium,
              decoration: BoxDecoration(
                color: Colors.red,
                border: Border(
                  right: BorderSide(
                    width: 1.0,
                    color: Colors.blue
                  ),
                ),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(AppSize.small),
                  bottomRight: Radius.circular(AppSize.small),
                )
              ),
            )

Show

do not pass border radius. It must be null. – Carnassial

Answer 1

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      stops:  [0.02, 0.02],
      colors: [Colors.red, Colors.white]
    ),
    borderRadius: BorderRadius.all(constRadius.circular(6.0))
  )
)

Wrongdoer

Nice solution!! – Orpah

Will this solution give rounded inner corners of the border if it applied for 2 or more sides of the container? – Sweatbox

Explain something about problem and solution... – Plaint

what if you cant use Container widget? in a TabBar indicator for example, I can only use BoxDecoration – Clive

@Clive all decoration makes in BoxDecoration as you noticed, try it or give your minimal example. – Wrongdoer

I've raised a new question for it. Please see #76919145 – Clive

Answer 2

This is the easiest way that I could came up with... as you can see there's 2 container, the color of outer container is actually the color of the border and the margin of inner container is the strokeWidth of the border and the color of inner container is the background color.

Container(
  decoration: BoxDecoration(
    color: Colors.grey[400],

    borderRadius: BorderRadius.only(
      topLeft: const Radius.circular(15.0),
      topRight: const Radius.circular(15.0),
    ),// BorderRadius

  ),// BoxDecoration
  child: Container(
    margin: const EdgeInsetsDirectional.only(start: 2, end: 2, top: 2),
    decoration: BoxDecoration(
      color: Colors.grey[300],

      borderRadius: BorderRadius.only(
        topLeft: const Radius.circular(13.0),
        topRight: const Radius.circular(13.0),
      ),// BorderRadius

    ),// BoxDecoration
  ),// Container
),// Container

It's a bit silly answer but works! ;)

Ladder

This is great! I extracted this logic into a reusable production-ready widget here: gist.github.com/rohan20/d12a709a27511304c853334dd636ba63 With screenshots and a DartPad demo 🚀 – Faceplate

This does not work if the background is not a single color. – Frierson

That's a smart approach! – Spermatozoid

Good for a quick solution (and well packed, as a reusable extracted widget!) but it misses some points: for exemple if the child is a scrollable like a list view, when you hit the end or start of the school you will get a big portion of the color you used as border, which should be just on the border, not the background for that scrollable. – Aliber

Answer 3

Flutter is complaining because you only apply a right border to your container, but want to have a border radius as well.

Flutter expects the border to be uniform, i.e. all the way around and in the same color, when applying border radius. If you jump to the sources where the assertion error was thrown you can have a look at the actual assertion.

Butts

Answer 4

Just provide all the other BorderSide (left, top and bottom since you have one for right), and set the width to zero.

Mckenzie

I wish i could give you multiple upVotes. You just saved my day.! – Stumpy

Prefect Solution. – Southdown

This is the right answer!! – Sporades

Unfortunlly, this workaround will not work starting from flutter 3.16.0 and will throw the following exception in the logs while not displaying the widget: "A hairline border like BorderSide(width: 0.0, style: BorderStyle.solid) can only be drawn when BorderRadius is zero or null." – Southdown

@MoazEl-sawaf try with style set to BorderStyle.none – Mckenzie

Answer 5

In my case this will give me your same error:

Container(
decoration: BoxDecoration(
  color: Colors.white,
  borderRadius: const BorderRadius.vertical(top: Radius.circular(32)),
  border: Border(
    top: BorderSide(color: borderColor, width: 2),
  ),
),

To fix it I had to set all the other Border sides:

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(32)),
        border: Border(
          top: BorderSide(color: borderColor, width: 2),
          left: BorderSide(color: borderColor, width: 0),
          right: BorderSide(color: borderColor, width: 0),
          bottom: BorderSide(color: borderColor, width: 0),
        )),
  )

Note that you can't use const BorderSide(width: 0) or BorderSide.none because it will give you the same error. It must have the same color but with width 0.

Luciferase

Answer 6

I was struggling with this same error, and found out a simpler solution that's much simpler than the alternatives suggested, which is using a shadow instead of a border.

If you think about it a 1pt border on one side is exactly the same as a shadow without blur that's offset 1pt in that direction.

You can create your Container with the round borders and use decoration to add a shadow to act as your desired border. Here's an example simulating a bottom border:

Container(
  padding: EdgeInsets.symmetric(horizontal: 32.0, vertical: 16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(46),
    boxShadow: [
      BoxShadow(
        color: Color(0xFFEEEEEE),
        blurRadius: 0,
        offset: Offset(0, 1),
      ),
    ],
  ),
  child: ...
),

All to this effect:

Coopery

Answer 7

Container(
      decoration: BoxDecoration(
        color: AppColors.white,
        borderRadius: BorderRadius.only(
          topRight:
              widget.currentJobIndex == 0 ? Radius.circular(7) : Radius.zero,
          topLeft:
              widget.currentJobIndex == 0 ? Radius.circular(7) : Radius.zero,
        ),
      ),
      child: Container(
        padding: EdgeInsets.only(top: 17, bottom: 20, left: 12, right: 12),
        decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: AppColors.greyE5))),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("This is the brief job description"),
            SizedBox(height: 10),
            Row(children: [
              Text(
                "Budget",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(":30,000"),
              Spacer(),
              Text(
                "Total Bids",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(":32",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Theme.of(context).primaryColor))
            ]),
            SizedBox(height: 10),
            Row(children: [
              Text(
                "Status: Confirmed",
                style: TextStyle(color: Theme.of(context).primaryColor),
              ),
              Spacer(),
              Text(
                "Monday August 22, 2021",
                style: TextStyle(fontSize: responsiveSize(10, context)),
              ),
            ])
          ],
        ),
      ),
    )

I used two containers, the outer one has the border radius, while the inner one has only bottom border. This way Flutter will no longer complain

Sizing

Answer 8

I made it with two containers, i used the first container as border, and second container as child with margin to show the borders.

The code of the container below the card:

Container(
                      height: 100,
                      width: width / 1.3,
                      decoration: BoxDecoration(
                          color: Colors.green,
                          borderRadius: BorderRadius.circular(10)),
                      child: Container(
                        margin:
                            EdgeInsets.only(bottom: 2, right: 2, left: 2),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(10),
                            bottomLeft: Radius.circular(10),
                          ),
                        ),
                      ),
                    ),

Michi

I was just about to post this here. It's the best and simplest solution. – Beg

Answer 9

Flutter expects the border to be uniform means all the way around and in the same color when applying border radius.

Check your border color are you applying the same on all sides?

Either you can apply the different color without a radius or you can use the same color with a different radius

Gilding

Answer 10

This is the only solution that is not a workaround. Wrap your widget inside a ClipRect with an border on all sides:

  ClipRect(
    clipper: Customshape(),
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(),
        borderRadius: BorderRadius.all(Radius.circular(5)),
      ),
    ),
  ),

This CustomShape Clipper cuts the border on the left side, which is why the Offsets x value is 2. If you need to clip it on the right side, then set x to 0 and use "size.width - 2".

class CustomShape extends CustomClipper<Rect>{
  @override
  Rect getClip(Size size) => const Offset(2.0, 0) & Size(size.width, size.height);
  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) => true;
}

Frierson

Answer 11

In Flutter3.16, if you set borderRadius and don’t want to display borders on certain sides, you should write like this：BorderSide(width: 0, style: BorderStyle.none)

Matchless

Answer 12

you can use same container with all properties but with 0 value, meanwhile use all properties keeping empty value like this

        Container(
          height: screenSize.height*.13,
          width: AppSize.medium,
          decoration: BoxDecoration(
            color: Colors.red,
            border: Border(
              right: BorderSide(width: 1.0, color: Colors.blue),
              left: BorderSide(width: 0),
              top: BorderSide(width: 0),
              bottom: BorderSide(width: 0),
            ),
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(AppSize.small),
              bottomRight: Radius.circular(AppSize.small),
              topLeft: Radius.circular(0),
              bottomLeft: Radius.circular(0),
            )
          ),
        )

Pickled