I am having a Container that has a gradient
BoxDecoration. What i would like to achieve is to reduce the width
of the gradient
just like in border
so that it can a small thin line. Below is my Container code
Container(
width: 220,
height: 120,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.purple.shade900,
Colors.purple.shade100,
])),
child: Container(
width: 200,
height: 100,
color: Colors.white,
alignment: Alignment.center,
child: const Text('Linear Gradient'),
),
)
CodePudding user response:
Your gradient is your outer Container. If you want to reduce the width of the gradient, reduce the width of your container.
Container(
width: 4,
height: 120,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.purple.shade900,
Colors.purple.shade100,
])),
child: Container(
width: 200,
height: 100,
color: Colors.white,
alignment: Alignment.center,
child: const Text('Linear Gradient'),
),
)
If you want to wrap your gradient container in a bigger container then wrap it with bigger container
CodePudding user response:
Try below code hope its help to you, I think you increase width and height of second container. refer my same answer