Related
Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
border: Border(
left: BorderSide(
color: Colors.green,
width: 3,
),
),
),
height: 50,
),
This is supposed to show a rounded-edged container with a green left border 3px wide, and the child Text "This is a Container". However, it just shows a rounded-edged container with an invisible child and an invisible left border.
When I take out the borderRadius object, the child Text and the green left border is visible, but introducing it hides the left border and child Text again.
The major problem seems to be the custom left border, because using border: Border.all(width: 0) and borderRadius: BorderRadius.circular(10) makes the edges rounded as needed and also shows the child. But now I cant apply the green left border which is quite important in this particular setup.
So is there something I'm doing wrong, or is this a bug in flutter, or is it just something that is not allowed?
Thank you in advance.
Edit: The image below is the end result. The colors don't matter
It's not possible to add border: and borderRadius: at the same time, you'll get this error:
A borderRadius can only be given for uniform borders.
You can achieve what you want using the borderRadius: and a boxShadow: instead of border: like this:
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3)
]
Your sample code would be like this:
Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3),
],
),
height: 50,
),
Edit: To achieve the example you now provided, you could do this:
Container(
padding: EdgeInsets.only(left: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.green,
),
height: 50,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)),
color: Colors.white,
),
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
),
),
Another solution:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
),
height: 50,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 12.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
color: Colors.green,
),
),
Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
)
],
),
),
There is an answer here
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
),
This might be so late but also it might be useful for others.
You can wrap your Container inside a ClipRRect, give the ClipRRect the radius and give the Container the border!
Example:
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
border: Border(
left: BorderSide(width: 8.0, color: Colors.green),
),
),
),
),
This should do the UI you lastly posted.
If you want to achieve borderRadius you could also use a PhysicalModel, but you'll have to provide colour. You also can have a shadow for your widget.
PhysicalModel(
color: Colors.red,
elevation: 5,
shadowColor: Colors.blue,
borderRadius: BorderRadius.circular(20),
child: SizedBox(width: 75, height: 75),
)
I think an easier way inspired by #pablo 's answer would be to just make a boxShadow with and offset but without any blur.
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(10),
),
boxShadow: [
// to make elevation
BoxShadow(
color: Colors.black45,
offset: Offset(2, 2),
blurRadius: 4,
),
// to make the coloured border
BoxShadow(
color: Colors.blue,
offset: Offset(0, 4),
),
],
),
The decoration above will give us an elevated box which has a blue border in the bottom.
Another benefit of this approcah is that you can use it with
borderRadius: BorderRadius.circular(num)
Which means you can have a container with all rounded sides + a colored border.
Please note that the coloured border comes under the original shadow. This is done to prevent the elevation color from darkening the border.
I archieve do a Inkwell (that simulate a button) circular with an icon inside :
InkWell(
onTap: (){},
child: Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
shape: CircleBorder(), //here we set the circular figure
color: Colors.red
),
child: Center(
child: Icon(
Icons.email,
size: 30,
color: Colors.white,
)
),
)
)
link example of result: https://images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png
////Hope this will work for you,Thanks
import 'package:flutter/material.dart';
class System extends StatefulWidget {
const System({Key? key}) : super(key: key);
#override
_SystemState createState() => _SystemState();
}
class _SystemState extends State<System> {
#override
Widget build(BuildContext context) {
return Scaffold(
body:Padding(
padding: const EdgeInsets.only(top:80.0),
child: Column(
children: [
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: const BoxDecoration(
color: Color(0xffF6EBEC),
border: Border(
bottom: BorderSide(width: 8.0, color: Color(0xffA24949)),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
backgroundColor: Color(0xffA24949),
child: Icon(Icons.close,
color: Color(0xffF6EBEC), size: 40),
),
const SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("Invalid",
style: TextStyle(color: Color(0xffA24949), fontSize: 18)),
SizedBox(
width: 243,
child: Text("Details do not match the issuer records",overflow: TextOverflow.ellipsis,maxLines: 1,))
])
],
),
),
),
),
),
SizedBox(height: 20,),
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 100,
width: double.maxFinite,
padding: const EdgeInsets.all(16.0),
decoration: const BoxDecoration(
color: Color(0xFFE9F6EB),
border: Border(
bottom: BorderSide(width: 8.0, color: Color(0xFF69A258),),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
backgroundColor: Color(0xFF69A258),
child: Icon(Icons.check_rounded,
color: Color(0xFFE9F6EB), size: 40),
),
const SizedBox(width: 15),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("Valid",
style: TextStyle(color: Color(0xFF69A258), fontSize: 18)),
Text("Document successfully validated.")
])
]),
),
),
),
),
],
),
),
);
}
}
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,
),
When I try to set the border radius of the top two corners of my container that is nested inside a card, the whole content of the container goes disappears. Here is my code, if you uncomment the commented line your whole content inside the container will go away.
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
decoration: BoxDecoration(
border: new Border(
top: BorderSide(
color: Theme.of(context).primaryColor,
width: 3.0,
)),
//borderRadius: BorderRadius.only(topLeft: const Radius.circular(5.0)),
),
child: makeListTile(widget.flight),
),
);
}
Just add
clipBehavior: Clip.antiAlias
To Card
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
decoration: BoxDecoration(
border: new Border(
top: BorderSide(
color: Theme.of(context).primaryColor,
width: 3.0,
)),
borderRadius: BorderRadius.only(topLeft: const Radius.circular(20.0)),
color: Colors.red,
),
height: 100,
width: 100,
),
)
I tried your code it works fine its only that the corner is getting hidden due to the card's corner look you have specified same radius for container and card,I just added a width and height to container and increased the circular radius to make the change visible,
I dont know why you are using the container inside a card if you want a card with only lefttop corner circular then you can do this by the below code,I recommend you to look at the ways of creating cards in flutter
SizedBox.expand(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20)),
side: BorderSide(width: 2.5, color: Colors.black)),
margin: EdgeInsets.all(10),
),
)
if you have any questions feel free to comment
Border radius not apply inside child Container.
Tried with SizedBox & Stack widget.
I need border view inside container.
Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
color: Colors.red,
)
),
)
)
)
Try this,
Use ClipRRect and nest inside another Container and now you can add non-uniform borders
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5)],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: Colors.indigo, width: 5),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.home),
Text("Home"),
],
),
),
),
)
Other answers already state that you need to use ClipRRect to apply the border radius to the child widget of Container.
However, Container widget now has its clipBehaviour property to clip its child:
Container(
// Add the line below
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(color: Colors.green, width: 2.0)),
child: Container(
color: Colors.red,
),
);
It's a good pratice to use this property rather than nest the widgets for a clean code.
decoration is painted behind the child. If you want the decoration to be applied in front of the container's child, use foregroundDecoration
Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Container(
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
color: Colors.red,
)
),
)
)
)
above code paints border in front of the child container. Please note that, even with foregroundDecoration child container would still have sharp corners.
If you want the child container to have rounded corners, either you need apply borderRadius to the child container or use ClipRRect with same border radius as the parent container
Instead of
Container
widget use
ClipRRect
Before (not working):
Center(
child: Container(
decoration: BoxDecoration(
borderRadius: _getAllRoundedBorderRadius(),
),
child: Hero(
tag: "CossackHero",
child: TweenImage(
last: AssetImage("images/background/cossack_0.jpg"),
first: AssetImage("images/background/c_cossack_0.jpg"),
duration: 2,
height: height,
),
),
),
),
After:
Center(
child: ClipRRect(
borderRadius: getAllRoundedBorderRadius(),
child: Hero(
tag: "CossackHero",
child: TweenImage(
last: AssetImage("images/background/cossack_0.jpg"),
first: AssetImage("images/background/c_cossack_0.jpg"),
duration: 2,
height: height,
),
),
),
),
Screenshot:
With ClipRRect (Using 2 Container)
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Container(
width: 100,
height: 100,
color: Colors.black,
child: Container(
margin: EdgeInsets.all(8),
color: Colors.blue,
),
),
)
Without ClipRRect (Using 1 Container)
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: Colors.black,
width: 4,
),
color: Colors.blue,
),
)
Replace your code with this
Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
decoration: new BoxDecoration(borderRadius:
BorderRadius.circular(15.0),
color: Colors.red,),
)
),
)
)
)
const innerRadius = 15.0;
const borderWidth = 2.0;
const borderColor = Colors.green;
const color = Colors.red;
const size = 100.0;
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(innerRadius + borderWidth),
color: borderColor,
),
padding: EdgeInsets.all(borderWidth),
child: ClipRRect(
borderRadius: BorderRadius.circular(innerRadius),
child: Container(
color: color,
width: size,
height: size,
),
),
);
This is how it looks:
And how it works: https://codepen.io/mshibanami/pen/LYyQJXa
By the way, some answers suggest you using one Container that has decoration including border and color like this:
Container(
width: size,
height: size,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(innerRadius),
border: Border.all(
color: borderColor,
width: borderWidth,
),
color: color,
),
)
It's OK but not ideal because the inner color appears slightly outside the border. So when the border is close to the background color, it may stand out like this:
try
decoration: BoxDecoration(
gradient: new LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.02, 0.02],
colors: [Colors.red, Colors.white],
),
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.grey, blurRadius: 5.0),
],
),
you have to just add these line of code clipBehavior:Clip.hardEdge,
Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Container(
clipBehavior:Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
color: Colors.red,
)
),
)
)
)
I guess your container might just not be visible because it has no child/height/width.
Try adding some Text as a child or if you want it to expand, you can force with SizedBox.expand.
See this answer for example on borders.
I'm using Flutter and I'd like to add a border to a widget (in this case, a Text widget).
I tried TextStyle and Text, but I didn't see how to add a border.
You can add the Text as a child to a Container that has a BoxDecoration with border property:
Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: Text('My Awesome Border'),
)
Here is an expanded answer. A DecoratedBox is what you need to add a border, but I am using a Container for the convenience of adding margin and padding.
Here is the general setup.
Widget myWidget() {
return Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: myBoxDecoration(), // <--- BoxDecoration here
child: Text(
"text",
style: TextStyle(fontSize: 30.0),
),
);
}
where the BoxDecoration is
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(),
);
}
Border width
These have a border width of 1, 3, and 10 respectively.
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 1, // <--- border width here
),
);
}
Border color
These have a border color of
Colors.red
Colors.blue
Colors.green
Code
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
color: Colors.red, // <--- border color
width: 5.0,
),
);
}
Border side
These have a border side of
left (3.0), top (3.0)
bottom (13.0)
left (blue[100], 15.0), top (blue[300], 10.0), right (blue[500], 5.0), bottom (blue[800], 3.0)
Code
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border(
left: BorderSide( // <--- left side
color: Colors.black,
width: 3.0,
),
top: BorderSide( // <--- top side
color: Colors.black,
width: 3.0,
),
),
);
}
Border radius
These have border radii of 5, 10, and 30 respectively.
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}
Going on
DecoratedBox/BoxDecoration are very flexible. Read Flutter — BoxDecoration Cheat Sheet for many more ideas.
The best way is using BoxDecoration()
Advantage
You can set the border of a widget
You can set the border Color or Width
You can set a Rounded corner of a border
You can add a Shadow of a widget
Disadvantage
BoxDecoration only use with Container widget, so you want to wrap your widget in Container()
Example
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.orange,
border: Border.all(
color: Colors.pink[800], // Set border color
width: 3.0), // Set border width
borderRadius: BorderRadius.all(
Radius.circular(10.0)), // Set rounded corner radius
boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
),
child: Text("My demo styling"),
)
you can wrap that widget to DecoratedBox that provide decoration to that widget in that case
Widget textDecoration(String text){
return DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 10,
),
),
child: Text(text)
);
}
As stated in the documentation, Flutter prefers composition over parameters.
Most of the time you're not looking for a property, but instead a wrapper (and sometimes a few helpers/"builder").
For borders, you want DecoratedBox, which has a decoration property that defines borders; but also background images or shadows.
Alternatively, like Aziza said, you can use Container. Which is the combination of DecoratedBox, SizedBox and a few other useful widgets.
Here, as the Text widget does not have a property that allows us to define a border, we should wrap it with a widget that allows us to define a border.
There are several solutions.
But the best solution is the use of BoxDecoration in the Container widget.
Why choose to use BoxDecoration?
Because BoxDecoration offers more customization like the possibility to define:
First, the border and also define:
border Color
border width
border radius
shape
and more ...
An example:
Container(
child:Text(' Hello Word '),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.red ,
width: 2.0 ,
),
borderRadius: BorderRadius.circular(15),
),
),
Output:
Wrap that widget with the container
Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(border: Border.all(
color: Colors.black,
width: 1,
),
),
child: Text(
"text",
style: TextStyle(fontSize: 30.0),
),
);
The above answers are also correct, but in case you want to add multiple borders at the same widget, then you can set this
Container(
child: const Center(
child: Text(
'This is your Container',
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: const [
BoxShadow(color: Colors.green, spreadRadius: 8),
BoxShadow(color: Colors.yellow, spreadRadius: 5),
],
),
height: 50,
)
Summary
I have tried to summarize all the important posibilities when using border in BoxDecoration.
Outcomes of the below explained borders:
Explaination
Basic
Container(
decoration: BoxDecoration(border: Border.all()),
child: const Text("Text"),
),
BorderColor, width and strokeAlign
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.green,
strokeAlign: BorderSide.strokeAlignCenter)),
child: const Text("Text"),
),
Border only on specific side
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
decoration: const BoxDecoration(
border: Border(top: BorderSide(width: 2))),
child: const Text("Text"),
),
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(width: 2))),
child: const Text("Text"),
),
Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 2),
bottom: BorderSide(width: 4))),
child: const Text("Text"),
),
],
),
Different Shapes
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
shape: BoxShape.circle),
child: const Text("Text"),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(10),
),
child: const Text("Text"),
),
],
),
Curved Border Radius
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.horizontal(
left: Radius.circular(5), right: Radius.circular(20))
),
child: const Text("Text"),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10),
bottomRight: Radius.circular(20))),
child: const Text("Text"),
),
],
),
You can use Container to contain your widget:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 1,
)),
child: Text()
),
Use a container with Boxdercoration.
BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.circular(10.0)
);
In case someone would like a outlined/bordered text or apply multiple borders.
You could try this:
https://pub.dev/packages/outlined_text
DEMO
If you want to add border to some text of container then you can easily to do it by applying BoxDecoration to Container.
code :
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.redAccent,
width: 1,
),
),
child: Text('Some Text'),
);
Rounded corner/border with bottom shadow
Container(
// child it's depend on your requirement
child: const Center(
child: Text(
'This is your Container',
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: <BoxShadow>[
// shadow color and radius
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
),
// according your height ex. 50
height: 50,
);
Try the following code:
Container(
margin: margin,
padding: padding,
decoration: BoxDecoration(
border: Border.all(
color: color,
width: width,
),
),
child: Text(
data,
style: TextStyle(fontSize: 30.0),
),
),
Text border style:
Stack(
children: <Widget>[
// Stroked text as border.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = Colors.blue[700]!,
),
),
// Solid text as fill.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
color: Colors.grey[300],
),
),
],
)
use the Text widget inside a container and use decoration to border the text
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 1,
)),
Yes, there's different approaches for that. One of them is:
Wrap it in a container. And use box decoration like this.
Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
border: Border.all(width: 5, color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(50)),
),
child: const Text(
"Box decoration",
style: TextStyle(fontSize: 34.0),
),
)