How can I reduce the width of only one border of OutlinedButton? I need this so that the 2 buttons that are next to each other look like one. Now there is a thick border between the two buttons. I want it to be like this
Code:
ButtonBar(
buttonPadding: EdgeInsets.zero,
children: [
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: theme.primaryColor),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5))),
),
onPressed: () => {},
child: IconSvg.asset('assets/icons/add.svg'),
),
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: theme.primaryColor),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5))),
),
onPressed: () => {},
child: IconSvg.asset('assets/icons/add.svg'),
),
],
),
Wrap the button inside a container, you can add border to only specified side.
Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: 7.0, color: statusColor),
),
left: BorderSide(
width: 7.0, color: statusColor),
),
),
I created a Container and then assigned the 2 OutlinedButton buttons in children of the Row widget inside the Container. Using BoxDecoration, we can set custom widths and colours to each side too.
I didn't have images for + and - so I used a Text widget for both of them.
ButtonBar(
alignment: MainAxisAlignment.start,
buttonPadding: EdgeInsets.zero,
children: [
// container
Container(
decoration: BoxDecoration(
// ---- can also set border widths
border: Border.all(
color: Colors.red,
),
// ---- set border radius
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
topRight: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
),
),
// ---- Row with the 2 buttons
child: Row(
children: [
// ---- 1st Button '+'
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
bottomLeft: Radius.circular(4))),
),
onPressed: () => {},
child: Text('+',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.black,
)),
),
// ---- 2nd Button '-'
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(4),
bottomRight: Radius.circular(4))),
),
onPressed: () => {},
child: Text('-',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.black,
)),
),
],
),
),
],
)
it works for me
Container(
decoration: BoxDecoration(
border: Border.all(
color: theme.primaryColor
),
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: ButtonBar(
buttonPadding: EdgeInsets.zero,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: theme.primaryColor,
),
),
),
child: IconSvg.asset('assets/icons/widgets/plus.svg'),
),
Container(
padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
child: IconSvg.asset('assets/icons/widgets/plus.svg'),
),
],
),
),
Related
How to remove divider line between ddrawer and the list?
I have next code:
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
),
),
child: Text('Settings'),
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text("Blue Print"),
),
],
),
);
that gives next drawer:
use container instead of drawer header widget and give decoration accordingly ,
Container(
width: MediaQuery.of(context).size.width,
height: 100,
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
)),
child: Text('Settings',).paddingSymmetric(vertical: 20, horizontal: 20))
You can try this code for your Ui:
But one issue is bottom edge is not perfect circular but bottom Divider gone.
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50),
),
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blueGrey,
),
child: Text('Settings'),
),
),
alternative solution:
Drawer(
child: ListView(
children: [
Container(
height: 200,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
child: Align(
alignment: Alignment.bottomLeft,
child: Text(
'Settings',
style: TextStyle(fontSize: 22),
)),
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
),
),
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text("Blue Print"),
),
],
),
)
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 want to make the container look like this style container but my container looks like this my container. How can I do this?
Code :
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Color(0xffCEFC4C),
borderRadius: BorderRadius.only(topRight: Radius.circular(20))),
width: 327,
height: 56,
alignment: Alignment.center,
child: Text(
'SAVE BUTTON',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
),
),
you can use something like this
Material(
clipBehavior: Clip.antiAlias,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20.0),
),
),
child: Container(
height: 100,
decoration: BoxDecoration(
color: Color(0xffCEFC4C),
),
),
),
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
None of the Flutter buttons seem to provide a way to change the corner radius of the button rectangle. There's a shape property but I have no idea how to use it.
You can change the radius from the shape property, and give it a RoundedRectangleBorder, here you can play with the border radius.
You will get the rounded corner only in topRight,topLeft and bottomRight in the below example:
RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(25.0),
topLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0),
),
),
),
Since the left-sided buttons are deprecated use the recommended ones.
Deprecated vs Recommended
RaisedButton - ElevatedButton
OutlineButton - OutlinedButton
FlatButton - TextButton
ElevatedButton
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white,
shadowColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(0.0),
topLeft: Radius.circular(0.0),
),
),
),
),
OutlinedButton
OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
side: BorderSide(width: 2, color: Colors.green),
),
onPressed: () {},
child: Text('Button'),
)
TextButton
TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('Text here',
style: TextStyle(
color: Colors.teal,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),