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),
]),
)
Related
enter image description here
I need to achieve this programmatically in flutter for all tabs and mobile screens.
Try with following basic code, you can customise as your requirement
Stack(
children: [
Container(
height: 32,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
),Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 32,
width: 32,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
alignment: Alignment.center,
child: const Icon(Icons.arrow_back_ios, size: 24, color: Colors.tealAccent,)),
Text('Your Text Here'),
Container(
height: 32,
width: 32,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
alignment: Alignment.center,
child: const Icon(Icons.arrow_forward_ios, size: 24, color: Colors.tealAccent,))
],
)
],
)
try this.
Transform.scale(
scale: .5,
child: const SizedBox(
width: 100,
height: 100,
child: FlutterLogo(),
),
),
U gotta do it manually by fixing the Height. i did one for u.
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 60,
width: double.infinity,
child: Stack(
children: [
Positioned(
top: 0,
bottom: 0,
left: 40,
right: 40,
child: Container(
constraints: const BoxConstraints.expand(),
decoration: BoxDecoration(
border: Border.all(color: Colors.cyan, width: 2),
),
child: const Center(child: Text('Hello man')),
),
),
Positioned(
top: 0,
left: 0,
bottom: 0,
width: 80,
child: _icon(Icons.arrow_back_ios_new),
),
Positioned(
top: 0,
right: 0,
width: 80,
bottom: 0,
child: _icon(Icons.arrow_forward_ios),
),
],
),
),
),
);
}
Widget _icon(IconData icon) => Container(
constraints: const BoxConstraints.expand(),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
border: Border.all(color: Colors.cyan, width: 2),
boxShadow: [
BoxShadow(
color: Colors.grey[200]!,
spreadRadius: 1,
blurRadius: 20,
),
BoxShadow(
color: Colors.grey[300]!,
spreadRadius: 1,
blurRadius: 20,
)
],
),
child: Icon(
icon,
color: Colors.cyan,
),
);
}
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 need a container that has these borders (those in the corners).
This is my code:
Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.black, width: 8),
left: BorderSide(color: Colors.black, width: 8),
),
),
padding: EdgeInsets.all(15),
height: 265,
width: 265,
margin: EdgeInsets.symmetric(
vertical: size.height * 0.1,
horizontal: size.width * 0.1,
),
child: Placeholder(),
),
But it looks like this:
How can I make the border shorter? Thanks
You can use Stack.
Stack(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.black, width: 8),
left: BorderSide(color: Colors.black, width: 8),
),
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
width: 48,
height: 48,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.black, width: 8),
right: BorderSide(color: Colors.black, width: 8),
),
),
),
),
Container(
padding: EdgeInsets.all(15),
height: 265,
width: 265,
margin: EdgeInsets.symmetric(
vertical: 16,
horizontal: 16,
),
decoration: BoxDecoration(
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0, 1),
blurRadius: 4,
spreadRadius: 0,
)
],
),
child: Container(),
),
],
)
Container(
// decoration: BoxDecoration(
// border: Border.all(color: Colors.black45),
// borderRadius: BorderRadius.circular(8.0),
// ),
child: Row(
children: <Widget>[
Container(
child: Text("hi"),
margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width *0.42,
height: 90,
color: Colors.black12,
),
Container(
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42 ,
height: 90,
color: Colors.black12,
)
],
),
),
I can add border using Box decoration on the outer container, but it's throwing me an error when I am trying to do the same on the inner containers. What is the problem and how to solve it?
In order to add border on container inside row widget , we have to use decoration for the inner containers.
Once you will post the error, we can answer you better but i think the below code will be helpful for you.
If you are using decoration then you must not add colour attribute in container directly, it should be in decoration only.
Container(
child: Row(
children: <Widget>[
Container(
child: Text("hi"),
margin: EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
shape: BoxShape.rectangle,
border: Border.all(
color: Colors.blue,
width: 4,
)),
),
Container(
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
shape: BoxShape.rectangle,
border: Border.all(
color: Colors.blue,
width: 4,
)),
)
],
),
),
In container widgets you cannot use the color and decoration at the same time. Remove the color property from the Container and move it into the BoxDecoration widget
This should work:
Container(
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
borderRadius: BorderRadius.circular(8.0),
color: Colors.black12, //add it here
),
child: Text("hi"),
margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width *0.42,
height: 90,
//color: Colors.black12, //must be removed
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
borderRadius: BorderRadius.circular(8.0),
color: Colors.black12, //add it here
),
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42 ,
height: 90,
//color: Colors.black12, // must be removed
)
],
),
),
Consider the humble Divider widget to keep things simple. If you add it to the bottom of a Column in your row it will add a line that will act as a border.
const Divider(height: 1.0,),
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
),
),
),