I have a custom border to draw around a widget. I have attached an image
Can anyone have an idea how to do this in flutter without a custom painter?
Please notice it doesn't have a bottom border.
Container(
height: 100,
width: 200,
alignment: Alignment.center,
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 5.0, color: Colors.black),
left: BorderSide(width: 5.0, color: Colors.black),
right: BorderSide(width: 5.0, color: Colors.black),
bottom: BorderSide(width: 0, color: Colors.white),
),
color: Colors.white,
),
child: const Text('OK', textAlign: TextAlign.center, style: TextStyle(color: Color(0xFF000000))),
)
Wrap the widget with Container
Container(
decoration: BoxDecoration(
border: Border.all(width: 5.0, color: Colors.black),
borderRadius: BorderRadius.circular(20.0) )// change value as per your needs
child: //your widget
)
Try below code hope its help to you.
If you want only Top corner are rounded :
Container(
width: double.infinity,
height: 100,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
border: Border.all(
width: 3,
color: Colors.black,
),
),
),
Result top rounded corner:
If you want all container rounded :
Container(
width: double.infinity,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
width: 5,
color: Colors.black,
),
),
),
All rounded contaner result:
Please Refer Below code:
Padding(
padding: const EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(7)),
child: Container(
height: 100,
width: double.infinity,
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.black,
width: 4.0,
),
top: BorderSide(
color: Colors.black,
width: 4.0,
),
right: BorderSide(
color: Colors.black,
width: 4.0,
),
),
),
child: Center(
child: Text('Custom Border'),
),
),
),
)
Related
I want to add border color on 3 side only and add border radius seems like in container its not possible i tried its showing some error then i try it with Material and its working fine but issue is i am not able to add borderRadius now. Need to know how can i add border radius with different side colors.
Want to achieve this
And stuck on this
You can see on left side no radius is showing
My code
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Material(
shape: Border(
left: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
bottom: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
top: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
),
child: Container(
width: Width * 0.45,
height: Height * 0.07,
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
),
child: Center(
child: Text(
'https://facebook.com/',
style:
TextStyle(color: textGreyColor, fontSize: 15),
)),
),
),
Container(
width: Width * 0.45,
height: Height * 0.07,
child: TextFormField(
key: ValueKey('name'),
style: TextStyle(color: textGreyColor),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Facebook Page",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
),
),
),
),
],
),
You can wrap it with ClipRRect. Not the best solution but it will work
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
child: Material(
shape: Border(
left: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
bottom: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
top: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
),
child: Container(
width: Width * 0.45,
height: Height * 0.07,
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
),
child: Center(
child: Text(
'https://facebook.com/',
style: TextStyle(
color: textGreyColor, fontSize: 15),
)),
),
),
),
Container(
width: Width * 0.45,
height: Height * 0.07,
child: TextFormField(
key: ValueKey('name'),
style: TextStyle(color: textGreyColor),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Facebook Page",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
),
),
),
),
],
),
Flutter expect that when you will use the border radius all border will be uniform. So using a custom style for 2 or 3 border and setting a border radius after that does not work.
You can use a outer container which will have the border and radius of four side. After that you place a ClipRRect to cut any background color if that goes over the outer container border. Here's a example output
#override
Widget build(BuildContext context) {
final double borderRadius = 6;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.all(16),
child: Center(
child: Container(
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
border: Border.all(color: Colors.grey, width: 1),
),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//left child
Expanded(
child: _facebookUrlText(),
),
//middle separator
Container(
width: 1,
color: Colors.grey,
),
//right child
Expanded(
child: _facebookPageInputField(),
),
],
),
),
),
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
),
),
);
}
_facebookUrlText() {
return Container(
height: double.infinity,
color: Color(0xffFAFAFA), //background color of left box
padding: EdgeInsets.symmetric(horizontal: 6),
child: Center(
child: Text(
'https://facebook.com/',
style: TextStyle(color: Colors.grey, fontSize: 15),
),
),
);
}
_facebookPageInputField() {
return TextFormField(
key: ValueKey('name'),
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent, width: 1),
),
filled: true,
hintStyle: new TextStyle(color: Colors.grey, fontSize: 15),
hintText: "Facebook Page",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent, width: 1),
),
),
);
}
I am trying to make layout similar to this image.
Here is my code:
GestureDetector(
child: Container(
width: double.infinity,
margin: EdgeInsets.only(left: 15, right: 15),
height: 100,
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: Colors.blue, width: 10.0),
top: BorderSide(color: Colors.grey[300], width: 2),
right: BorderSide(color: Colors.grey[300], width: 2),
bottom: BorderSide(color: Colors.grey[300], width: 2),
),
borderRadius:
BorderRadius.only(
topRight: Radius.circular(15)
)),
),
onTap: () => {},
)
Not really sure why but borderRadius only works when specifying border with Border.all else it crashes..
Maybe this workaround can get the job done for you..
GestureDetector(
child: Stack(children: <Widget>[
new Container(
margin: EdgeInsets.only(left: 15, right: 15),
width: double.infinity,
height: 100.0,
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.grey[300],
width: 2.0,
style: BorderStyle.solid),
borderRadius: new BorderRadius.horizontal(
right: new Radius.circular(20.0),
),
),
),
Container(
width: 10,
height: 100,
margin: EdgeInsets.only(left: 15),
color: Colors.blue),
]),
)
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 am new to flutter and I am trying to make a dynamic icon button.
for that I add following decoration
Container(
margin: const EdgeInsets.only(left: 45.0),
width: 150,
height: 50,
decoration: BoxDecoration(
border: Border(
top: BorderSide(width: 2.0, color: AppColors.primaryColor),
bottom: BorderSide(width: 2.0, color: AppColors.primaryColor),
right: BorderSide(width: 2.0, color: AppColors.primaryColor)
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(12.0)),
),
child: Center(
child: Text(
this.iconText,
style: TextStyle(color: AppColors.primaryTextColor),
),
),
),
But when I add this 'borderRadius' border disappear and when I comment 'borderRadius' border appear. Could I know the reason for that? and How can I use borderRadius without border disappe
You have to Add Border from all side
Container(
margin: const EdgeInsets.only(left: 45.0),
width: 150,
height: 50,
decoration: BoxDecoration(
border: Border(
top: BorderSide(width: 2.0, color: AppColors.primaryColor),
bottom: BorderSide(width: 2.0, color: AppColors.primaryColor),
right: BorderSide(width: 2.0, color: AppColors.primaryColor),
left: BorderSide(width: 2.0, color: AppColors.primaryColor)
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(12.0)),
),
child: Center(
child: Text(
this.iconText,
style: TextStyle(color: AppColors.primaryTextColor),
),
),
),
Or this
Container(
margin: const EdgeInsets.only(left: 45.0),
width: 150,
height: 50,
decoration: BoxDecoration(
border: Border.all(width: 2.0, color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.only(
topRight: Radius.circular(12.0)),
),
child: Center(
child: Text(
this.iconText,
style: TextStyle(color: AppColors.primaryTextColor), //Whatever color you want
),
),
),
I'm making a Container(), I gave it a border, but it would be nice to have rounded borders.
This is what I have now:
Container(
width: screenWidth / 7,
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
),
child: Padding(
padding: EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
Text(
'6',
style: TextStyle(
color: Colors.red[500],
fontSize: 25),
),
Text(
'sep',
style: TextStyle(
color: Colors.red[500]),
)
],
),
),
);
I tried putting ClipRRect on it, but that crops the border away. Is there a solution for this?
Try using the property borderRadius from BoxDecoration
Something like
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: ...
)
To make it completely circle:
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
),
)
To make it a circle at selected spots:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0)),
),
child: Text("hello"),
),
or
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: ...
)
You can use like this. If you want border for all the corners you can use like bellow.
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
),
If you want rounded borders for selected sides only you can use like below.
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
child: Text('Text'),
),
You can use ClipRRect Widget:
ClipRRect (
borderRadius: BorderRadius.circular(5.0),
child: Container(
height: 25,
width: 40,
color: const Color(0xffF8742C),
child: Align(
alignment: Alignment.center,
child: Text("Withdraw"))),
)
Enhancement for the above answer.
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
),
child: ...
)
It can be done in many different ways.
If you have a simple rounded corner to implement use ClipRRect , ClipOval
If you want to have more command over the rounded corneres use BoxDecoration inside the Container
ClipRRect
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(height: 100, width: 100, color: Colors.orange)),
ClipOval
ClipOval(
child: Container(height: 100, width: 100, color: Colors.orange)),
BoxDecoration
Border across all the corners
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.orange),
height: 100,
width: 100,
);
Border in a particular corner
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
bottomRight: Radius.circular(40)),
color: Colors.orange),
height: 100,
width: 100,
),
Border in a particular axis
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.horizontal(
right: Radius.circular(60),
),
color: Colors.orange),
height: 100,
width: 100,
);
To make a complete circle just use shape property :
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: Icon(
Icons.add,
size: 15.0,
color: Colors.white,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
color: HexColor('#C88A3D'),
width: 3.0
)
),
child: Container(
decoration: new BoxDecoration(borderRadius:
BorderRadius.circular(20.0),
color: Colors.white,),
)
),
The key here is to add a BorderRadius:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[340],
),
borderRadius: BorderRadius.all(Radius.circular(35),
),
child: `enter code here`
),
just with put this at the Container
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(30))
),
)
Just simply use circle shape shape: BoxShape.circle in BoxDecoration.
All code be like
Container(
decoration: BoxDecoration(
shape: BoxShape.circle
),
)
Just to show another way to do the same thing.
Might be useful when needs to use InkWell around Container.
Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
height: 100,
width: 150,
),
);
SizedBox(
child: (Container(
decoration: BoxDecoration(
color: Colors.grey,
border: Border.all(
color: Colors.grey,
),
borderRadius:
BorderRadius.all(Radius.circular(20))),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text('00'),
Padding(
padding: const EdgeInsets.fromLTRB(
2.0, 0, 0, 0),
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: CustomText(
"2",
color: Colors.black,
),
),
), // text
],
),
],
),
)),
width: 60,
),