I am trying to create a view something like this.
But the issue is that while using BeveledRectangleBorder, the border width of that side is not matching the whole border width.
I am using the below code:-
Material(
color: Colors.black,
clipBehavior: Clip.antiAlias,
shape: BeveledRectangleBorder(
side: BorderSide(
color: Color.fromRGBO(255, 255, 255, .10),
width: 2,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(
ScreenUtil().setHeight(15),
),
),
),
child: new Container(
width: 100,
decoration: BoxDecoration(
color: Color.fromRGBO(255, 255, 255, .10),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),
border: Border.all(
color: Color.fromRGBO(255, 255, 255, .10),
width: 2,
),
),
child: new Container(
height: 50,
width: 100,
),
),
)
Not sure on how to explain this but in my example the two lines are the same length. It looks like the rendering is taking the width from BorderSide and not using that perpendicular to the beveled edge but just as a horizontal width.
I'm not sure on how to fix this and if this is working as intended or a bug.
You might want to post this as an issue on the flutter github.
Material(
color: Colors.black,
clipBehavior: Clip.antiAlias,
shape: BeveledRectangleBorder(
side: BorderSide(
color: Color.fromRGBO(255, 0, 0, 1),
width: 30,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(
80,
),
),
),
child: new Container(
width: 200,
height: 300,
color: Colors.black,
),
)
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]),
),
),
)
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,
),
),
),
),
When I scroll the box flickers white.
Here's a video of it:
https://flutter-project.tumblr.com/post/656161576589672448
Here's my code:
body: ListView(
children: <Widget>[
Container(
height: 120,
color: Colors.white
),
Card(
elevation: 0,
color: Colors.white,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0),),
child: Container(
height: 20,
decoration: BoxDecoration(
color: Color(0xFF1F305E),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),),
),
),
),
The look I'm trying the achieve:
Here's a video of it:
https://flutter-project.tumblr.com/post/656241232200220672
Not sure if this is the best way but adding a box shadow got rid of it...
Card(
elevation: 0,
color: Colors.white,
margin: EdgeInsets.zero,
shadowColor: Color(0xFF1F305E),
borderOnForeground: false,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0),),
child: Container(
height: 20,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
spreadRadius: 5,
color: Color(0xFF1F305E),
offset: Offset(1,1,)
)
],
color: Color(0xFF1F305E),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
bottomRight: Radius.zero,
bottomLeft: Radius.zero),
),
),
),
I added borders on 3 of 4 sides of my Container. It is not shown if I'm adding a borderRadius in the BoxDecoration. Without the borderRadius it is visible with the borders and the text in it. How can I add a borderRadius to the Container without it being hidden?
[...]
Container(
padding: EdgeInsets.all(10),
height: 85,
width: 330,
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.black, width: 2),
right: BorderSide(color: Colors.black, width: 2),
bottom: BorderSide(color: Colors.black, width: 2),
),
// borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Text(
'Example text! Example text! Example text! Example text!',
style: TextStyle(fontSize: 22, fontFamily: 'Dosis'),
),
),
[...]
You can get reference from below code..
body: Container(
margin: EdgeInsets.all(100.0),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0)
) ,
border: Border(
top: BorderSide(color: Colors.black, width: 2),
right: BorderSide(color: Colors.black, width: 2),
bottom: BorderSide(color: Colors.black, width: 2),
),
),
)
I'm trying to build one side circular border with Container widget in flutter.
I have searched for it but can't get any solution.
Container(
width: 150.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(30.0),
/* border: Border(
left: BorderSide()
),*/
color: Colors.white
),
child: Text("hello"),
),
Use BorderRadius.only and provide the sides
return Center(
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
),
border: Border.all(
width: 3,
color: Colors.green,
style: BorderStyle.solid,
),
),
child: Center(
child: Text(
"Hello",
),
),
),
);
Output
You can achieve this by following code for creating your widget :
return Container(
width: 150.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.zero,
bottomLeft: Radius.zero,
bottomRight: Radius.zero,
),
),
child: Text(
"hello",
),
);
This way you can have your top left sided circular border with Container widget in flutter.
Another way of doing this is to use the ClipRRect widget.
Simply wrap your widget with ClipRRect and give a radius.
You can specify which corner you want to make round.
ClipRRect(
borderRadius: BorderRadius.only(topRight: Radius.circular(10)),
child: Container(
height: 40,
width: 40,
color: Colors.amber,
child: Text('Hello World!'),
),
);
If you want one side of a container rounded you want to use BorderRadius.only and specify which corners to round like this:
Container(
width: 150.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomRight: Radius.circular(40.0)),
color: Colors.white),
child: Text("hello"),
),
Also You can do it with 'Shape Function'.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(15.0),
topLeft: Radius.circular(15.0),
),
also do can do as follows,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(30.0),
bottomLeft: const Radius.circular(30.0),
),
You can also set the radius of each side.
margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
fromLTRB= from Left, Top, Right, Bottom