Adding a border to 3/4 sides in flutter - flutter

I'm trying to add a border to 3/4 sides on a custom button (the bottom has no border). However, the code produces no border anywhere. If I give all the sides a border, it works, but does not work if I do 3/4 sides. Any help is greatly appreciated. This is the code:
class CustomButton extends StatelessWidget{
CustomButton(this.img, this.title, this.connectivity, this.link);
final img;
final title;
final connectivity;
final link;
#override
Widget build(BuildContext context){
return GestureDetector(
onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context) => UrlViewers(link)));
print("Link: $link");
},
child: Column(
children: [
Container(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 2),
height: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
border: Border(
left: BorderSide(color: Colors.black, width: 1.0),
top: BorderSide(color: Colors.black, width: 1.0),
right: BorderSide(color: Colors.black, width: 1.0),
),
image: DecorationImage(image: NetworkImage(img), fit: BoxFit.cover)
),
),
Container(
padding: EdgeInsets.all(2),
decoration: BoxDecoration(
color: Colors.white24,
borderRadius: BorderRadius.circular(10),
),
child: Text(title, style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold,)),
)
],
),
);
}
}


I have had the same issue earlier, apparently there is no simple way to add borders to a container while controlling its radius..
if you just remove the borderRadius parameter from the BoxDecoration it should work just fine.

Related

Create circle around a letter in flutter

I was trying to create a circle around a letter here is my code, but it was not creating a perfect circle
Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.white, width: 2)),
child: InkWell(
child: Text(
"A",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 15),
),
),
),
I've also tried with height and width of the Container then some portion of letter is hidden.
Container(
height: 30,
width: 30,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.white, width: 2)),
child: InkWell(
child: Text(
"A",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 15),
),
),
)
But if I use Icon Widget instead of text widget it was creating perfect circle,
Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.white, width: 2)),
child: InkWell(
child: Icon(
Icons.add,
color: Colors.white,
),
),
),

Use this:
CircleAvatar(
backgroundColor: Colors.blue,
child: Text("A"),
);
You can also make use of the many other flags in CircleAvatar, like maxRadius or foregroundImage, like this:
CircleAvatar(
backgroundColor: Colors.blue,
child: Text("A"),
maxRadius: 30,
foregroundImage: NetworkImage("enterImageUrl"),
);
Looks like this:

For Containers, you can use the shape property to give it a circular shape.
It would be something like this :
Container(
decoration: BoxDecoration (
shape: BoxShape.circle,
),
child: ....
)

If I face multiple widget I prefer by creating a widget and wrapping others.
Container BoxShape.circle, depends on height
class WrapWithCircle extends StatelessWidget {
final Widget child;
late final EdgeInsets edgeInsets;
late final Color color;
WrapWithCircle({
Key? key,
required this.child,
this.edgeInsets = const EdgeInsets.all(8),
this.color = Colors.white,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
padding: edgeInsets,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 2,
color: color,
),
),
child: child,
);
}
}

Container with rounded border but top border has different width than other sides

I'm trying to create a container that has a rounded border but the top border is wider than the rest to fit some text (probably using a Stack).
Something like this:
How ever I haven't found a way to achieve this. I tried this:
return Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: MyColors.backgroundColor1(context), width: 5, style: BorderStyle.solid),
right: BorderSide(color: MyColors.backgroundColor1(context), width: 5, style: BorderStyle.solid),
bottom: BorderSide(color: MyColors.backgroundColor1(context), width: 5, style: BorderStyle.solid),
top: BorderSide(color: MyColors.backgroundColor1(context), width: 25, style: BorderStyle.solid),
),
),
child: ...
);
But this way I can't add any border radius.
Any idea how to achieve this in Flutter?

Here is a minimum reproducible sample:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10), topRight: Radius.circular(10))),
clipBehavior: Clip.antiAlias,
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.black, width: 20),
left: BorderSide(color: Colors.black, width: 2),
bottom: BorderSide(color: Colors.black, width: 2),
right: BorderSide(color: Colors.black, width: 2),
)),
),
),
),
);
}
}
You could also achieve this with a stack, though I suspect this is closer to what you're looking for. The key is the clip in the parent container. That will hide everything that overflows from that parent container.
EDIT
After taking a closer look at your picture, I think a stack is the best way to go. That will easily allow you to put the text up in that top border.
Here's an example widget:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
child: Padding(
padding: EdgeInsets.all(20),
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10))),
)),
Positioned.fill(
child: Column(children: [
Text("Sample Text",
style: TextStyle(color: Colors.white, fontSize: 18)),
Expanded(
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10))),
),
))
]))
],
),
),
),
);
}
}
Basically, you stack a column on top of a container that is filled with your "border" color. The first element in that column is the text you want to show in the "border". Then, you fill the rest of the column with an expanded widget and container whose color is your background color. That container is wrapped in padding, which provides you with the border width on the left, right, and bottom of the widget.

Border container and card

I've the following code:
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
child: InkWell(
onTap: () {
....
},
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Theme.of(context).primaryColor,
width: 3.0,
)),
//borderRadius: BorderRadius.only(topLeft: const Radius.circular(5.0), topRight: const Radius.circular(5.0)),
),
height: 133,
child: ...,
),
));
}
The problem is that I am trying to set a color on the top border and assign a border radius of 5. As far as I am aware, I can't assign a color to the top border in the card. You have to set it all the way around. But you can do this on the container. The problem is that adding a radius to the Container makes the content inside it disappear.

That's an interesting mechanic... Though not ideal, I suppose you could wrap your child with a Column and make your own custom border element, so it doesn't clash with your content.
Something like this:
class MyTopBorder extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(5.0),
topRight: const Radius.circular(5.0),
),
color: Theme.of(context).primaryColor,
),
height: 3.0,
);
}
}
and then add it to your Card:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
child: InkWell(
onTap: () {
// ...
},
child: Column(
children: <Widget>[
MyTopBorder(),
Container(
height: 133,
child: Text("..."),
),
],
),
),
),

How can I make a shadow with a material design card?

This is the result that I would like to have :

Make a custom card
///custom cards
Widget card(String image) {
return Container(
child: Image.asset(
image,
fit: BoxFit.cover,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2.0),
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.blue,
blurRadius: 3.0,
offset: new Offset(0.0, 3.0),
),
],
),
margin: EdgeInsets.all(5.0),
height: 150.0,
width: 100.0,
);
}
Box Shadow is what you need. I hope this will help.

Two ways I know to make a card with shadow. one with the built-in Card Widget and other Using the Container Widget
1.Using Card Widget
SizedBox.expand(
child: Card(
margin: EdgeInsets.all(10),
elevation: 3.0,// this field changes the shadow of the card 1.0 is default
shape: RoundedRectangleBorder(
side: BorderSide(width: 0.2),
borderRadius: BorderRadius.circular(20)),
),
)
Using Container Widget
Container(
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(width: 0.2),
boxShadow: [
BoxShadow(
blurRadius: 2.0,
spreadRadius: 0.4,
offset: Offset(0.1, 0.5)),
],
color: Colors.white),
)
modify BlurRadius and offset to alter the shadow of the container

You can use container with boxshadow. you can use below class to archive card effect in container.
class CustomCard extends StatelessWidget {
const CustomCard(
{Key? key, required this.child, this.height, this.width, this.redius})
: super(key: key);
final Widget child;
final double? height;
final double? width;
final double? redius;
#override
Widget build(BuildContext context) {
return Container(
child: child,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(redius ?? 5),
),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color.fromRGBO(230, 230, 230, 0.9),
blurRadius: redius ?? 5,
offset: Offset(0.0, 4.0),
),
],
),
margin: EdgeInsets.all(5.0),
height: height ?? 150.0,
width: width ?? 100.0,
);
}
}

How can I add a border to a widget in Flutter?

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),
),
)