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(),
),
],
)
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 am using android studio and always use reformate code with 'dartfarmate' option. but it alwasy breaks the code in very unnecessary code of line which sometime disturb me while coding. what is the better solution
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey),
color: const Color
.fromARGB(
100, 225, 225, 225),
borderRadius:
BorderRadius
.circular(5),
),
margin:
const EdgeInsets.only(
bottom: 5),
padding:
const EdgeInsets.only(
bottom: 8,
top: 8,
left: 8,
right: 8),
child: InputField(
text:
"detail here...",
controller:
controler,
isEditable:
true,
),
),
But I expect the code should look like that
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
color: const Color.fromARGB(100, 225, 225, 225),
borderRadius: BorderRadius.circular(5),
),
margin: const EdgeInsets.only(bottom: 5),
padding:
const EdgeInsets.only(bottom: 8, top: 8, left: 8, right: 8),
child: InputField(
text: "detail here...",
controller: controler,
isEditable: true,
),
),
You can try this :
Go to Preferences -> Editor -> Code Style -> Dart -> Line Length and put and appropriate value.
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),
]),
)
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'm trying to create a container which has a yellow border on the left, but grey around the remainder and which keeps the borderRadius. I'm trying to use this as container for drop-down menu, as I can't create a border directly on that control.
This is what it should look like:
On the BoxDecoraction, I use the Border() method to specify the left border color.
Container(
width: 400,
margin: EdgeInsets.only(top: 20),
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Color.fromRGBO(255, 167, 38, 1),
width: 5),
right: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
top: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
bottom: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
),
borderRadius: BorderRadius.all(Radius.circular(10))
),
But if I then try to use borderRadius, it throws an error and doesn't render. It seems if I use the Border() and specify sides directly it break, but if I use border.all() it works.
How can I set borderRadius and still have left border different width/color?
How to solve?
you can use ClipRRect
your code with this solution:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
width: 400,
margin: EdgeInsets.only(top: 20),
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Color.fromRGBO(255, 167, 38, 1),
width: 5),
right: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
top: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
bottom: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
),
),
)
also these may be useful:
https://api.flutter.dev/flutter/widgets/ClipRRect-class.html
https://www.youtube.com/watch?v=eI43jkQkrvs
It might be a late, but dropping this answer it might help someone,
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
border: Border.all(color: Colors.grey, width: 1)),
child: Row(
children: [
Container(
height: 75,
width: 8,
color: Colors.grey,
),
const Expanded(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Text('What do you plan to do?'),
),
)
],
),
),
),
This code shows the result: