Posts: 0
Threads: 0
Joined: Nov 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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),
)
),
)
|
Posts: 0
Threads: 0
Joined: Dec 2016
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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.
|
Posts: 0
Threads: 0
Joined: Mar 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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! ;)
|
Posts: 0
Threads: 0
Joined: Sep 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
stops: [0.02, 0.02],
colors: [Colors.red, Colors.white]
),
borderRadius: new BorderRadius.all(const Radius.circular(6.0))))
[![enter image description here][1]][1]
[1]:
|
Posts: 0
Threads: 0
Joined: Dec 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
```
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
|
Posts: 0
Threads: 0
Joined: Oct 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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**
|
Posts: 0
Threads: 0
Joined: Nov 2017
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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:
[![rounded bottom border simulated with blur-less shadow][1]][1]
[1]:
|
Posts: 0
Threads: 0
Joined: Oct 2020
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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;
}
|
Posts: 0
Threads: 0
Joined: Oct 2016
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
Just provide all the other BorderSide (left, top and bottom since you have one for right), and set the width to zero.
|
|