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
),
),
),
Related
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'),
),
),
),
)
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'm able to change the outline color of a TextField's color to a solid color by using the following code:
TextField(
decoration: InputDecoration(
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.orange),
),
),
),
However, I couldn't change its color to a gradient since it only accepts color as an input. How would I change its underline color to a linear gradient in Flutter?
Though, it seems that there is not a property to change underlined color to gradient color, this effect can be achieved with Stack widget,
Here is how I tried to do it:
body: Center(
child: Container(
height: 50,
margin: EdgeInsets.all(
10.0,
),
child: Stack(
children: <Widget>[
TextField(
cursorColor: Colors.red,
decoration: InputDecoration(
hintText: " Enter your text here",
contentPadding: EdgeInsets.symmetric(
vertical: 15.0,
horizontal: 15.0,
),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
width: 0.5,
),
borderRadius: BorderRadius.circular(
10.0,
),
),
),
),
Positioned(
bottom: -1,
child: Container(
height: 10,
width: MediaQuery.of(context).size.width - 20,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
gradient: LinearGradient(
colors: [
Colors.red,
Colors.green,
],
),
),
),
),
],
),
),
),
You can modify it according to your UI.
Output:
Second Verion with no borders :
body: Center(
child: Container(
height: 50,
margin: EdgeInsets.all(
10.0,
),
child: Stack(
children: <Widget>[
TextField(
cursorColor: Colors.red,
decoration: InputDecoration(
hintText: " Enter your text here",
contentPadding: EdgeInsets.symmetric(
vertical: 15.0,
horizontal: 15.0,
),
),
),
Positioned(
bottom: 1,
child: Container(
height: 3,
width: MediaQuery.of(context).size.width - 20,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.red,
Colors.green,
],
),
),
),
),
],
),
),
)
Output:
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),
),
),
)