I'm looking for the way to create rounded container with only topLeft and topRight radiuses and without bottom border. Here is what I tried:
Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: AppColors.lightPurple2,
),
right: BorderSide(
color: AppColors.lightPurple2,
),
top: BorderSide(
color: AppColors.lightPurple2,
),
),
// border: Border.all(
// color: AppColors.lightPurple2,
// ),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(Rad.sm),
topRight: Radius.circular(Rad.sm),
),
),
But this code doesn't work
======== Exception caught by rendering library =====================================================
The following assertion was thrown during paint():
A borderRadius can only be given for a uniform Border.
The following is not uniform:
BorderSide.color
BorderSide.width
BorderSide.style
However if I use Border.all() it works good but I need to remove bottom border somehow.
If I remove borderRadius it draw 3 border but without radiuses.
So is there a way to use both options?
What I want to get eventually:
You can use shadow and achieve the same result
Container(
height: 300,
width: 300,
decoration: BoxDecoration(
borderRadius:
BorderRadius.vertical(top: Radius.circular(10)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.purple,
offset: Offset(2, -2),
spreadRadius: 0,
blurRadius: 0),
BoxShadow(
color: Colors.purple,
offset: Offset(-2, -2),
spreadRadius: 0,
blurRadius: 0)
]))
Related
I have a special requirement on my Container border.
It should only have a border on the left, right and bottom but not on the top.
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(146, 94, 58, 1.0),
border: Border.all(
color: Color.fromRGBO(85, 63, 48, 1.0),
width: 2,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(2),
bottomRight: Radius.circular(2),
),
),
)
I can only find .all and .symmetric but nothing like .only which I have seen for the BorderRadius Widget. Why is it missing for Border and how can I make this still work?
look this question
and you can read this article
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.5, color: Colors.grey[300]),
),
),
)
Container(
decoration: BoxDecoration(
boxShadow: BoxShadow(
color: Colors.black,
blurRadius: 5,
spreadRadius: 6,
),
color: Color.fromARGB(255, 255, 255, 255),
border: Border(
left: BorderSide(color: Colors.black, width: 10.0),
),
),
)
What is wrong, why are there red lines under the Boxshadow? I watched a video and did exactly what he did. Where is the mistake?
You need to pass list of BoxShadow on boxShadow.
Container(
decoration: BoxDecoration(
boxShadow: [ // issue was here
BoxShadow(
color: Colors.black,
blurRadius: 5,
spreadRadius: 6,
),
],
color: Color.fromARGB(255, 255, 255, 255),
border: Border(
left: BorderSide(color: Colors.black, width: 10.0),
),
),
)
More about Container
I am trying to replicate the list view below. It's a list view(or containers), that you can select, and it will make the border colored and apply a background with no padding between the containers, but there is a thing, they share the same divider line. I have already given a shot on this, but didn't quite work as I expected. Because the dividers lines got doubled (thicker), and it's kinda annoying.
What I want:
EDIT:
They are selectable containers, so you can click on each one and it will highlight the borders, so if you are thinking of making the middle container one with borders only at the right and left side, it will not work because you will not be able to highlight the top and bottom border.
See the example below:
I was trying to make the first container with the bottom border transparent ( bottom: BorderSide(width: 1, color: Colors.transparent), ), so it would not get doubled. But it seems that you can not have a radius container in flutter with different border colors.
What I have made:
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20),
),
border: Border.all(width: 1, color: Colors.red),
),
),
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.black)),
),
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
),
border: Border.all(width: 1, color: Colors.black),
),
),
For the middle Container use just border:Border(left:,right:)
Container(
height: 100,
width: 200,
decoration: const BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.green,
width: 1,
),
right: BorderSide(
color: Colors.green,
width: 1,
),
),
),
),
try this:
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20),
),
border: isTopSelected ? Border.all(width: 1, color: Colors.red) :
Border(
top: BorderSide(
color: Colors.black,
width: 1,
),
left: BorderSide(
color: Colors.black,
width: 1,
),
right: BorderSide(
color: Colors.black,
width: 1,
),
),
),
),
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
border: isMiddleSelected ? Border.all(width: 1, color: Colors.red) :
Border.all(width: 1, color: Colors.Black),
),
),
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
),
border: isBottomSelected ? Border.all(width: 1, color: Colors.red) :
Border(
bottom: BorderSide(
color: Colors.black,
width: 1,
),
left: BorderSide(
color: Colors.black,
width: 1,
),
right: BorderSide(
color: Colors.black,
width: 1,
),
),
),
),
How to add elevation to a container with borderRadius
I have tried Material/elevation and ClipRRect.showBox but it doesn't look as good as regular elevation
You can use a Container with boxShadow and borderRadius like that for example:
Container(
width: 200,
height: 100,
decoration: const BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(
Radius.circular(15.0),
),
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
blurRadius: 2,
spreadRadius: 2,
color: Colors.black26,
),
],
),
);
It will look something like that:
You can play with the shadows to achieve the elevation you want.
Add BoxShadow with grey shadow color, it will give an elevation effect.
Container(
height: 200, /// Change height and width as per your need.
width: 200,
child: Container(
color: Colors.red
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Output:
How can I add this outer glow shadow to this button on Flutter?
On Figma:
It's done by either
filter: drop-shadow(0px 0px 20px rgba(255, 85, 85, 0.7));
or
Effect: Drop Shadow
Radius: 20px
Offset: 0px, 0px
rgba(255, 85, 85, 0.7)
Applying a BoxShadow to the container which contains the button does not work:
BoxShadow(
color: Color.fromRGBO(0, 0, 0, _opacity),
offset: Offset(_xOffset, _yOffset),
blurRadius: _blurRadius,
spreadRadius: _spreadRadius,
Because it's constrained by the container size.
With blurRadius and if you want to make color more visible add spreadRadius value.
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.black, width: 2),
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 30,
),
],
),
Wrap button with the container and give it box-shadow property.
it works...
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18.0),
),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.pink,
spreadRadius: 4,
blurRadius: 10,
offset: Offset(0, 0),
)
]),
child: FlatButton(
onPressed:(){},
child: Text("submit"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),