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'),
),
)
Try below code hope its help to you, I think you increase width and height of second container. refer my same answer here
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: 215,
height: 115,
color: Colors.white,
alignment: Alignment.center,
child: const Text('Linear Gradient'),
),
),
Result screen->
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
Related
I am trying to fit image to the whole screen. I am using media query to fill the image for the whole screen, but the problem is image is scrolling when using media query full height. Is it possible to show image without scrolling to fill the whole screen.
return Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('assets/welcome_screen.png'),fit:BoxFit.fill),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
end: const Alignment(0.0, -1),
begin: const Alignment(0.0, 0.4),
colors: <Color>[const Color(0x8A000000), Colors.black12.withOpacity(0.0)],
),
),
),
),
You can try this:
return Stack(
children: [
Column(
children: [
Expanded(
child: Container(
//height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('assets/welcome_screen.png'),fit:BoxFit.fill),
),
),
),
]
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
end: const Alignment(0.0, -1),
begin: const Alignment(0.0, 0.4),
colors: <Color>[const Color(0x8A000000), Colors.black12.withOpacity(0.0)],
),
),
),
),
i have created spotify login UI by using align widget to make typing comfortable. but the image above doesn't disappear or get pushed like the align widget. is there a solution to remove the image or detect if an overflow occurs?
Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xff96979C), Color(0xff636669), Color(0xff25252D)],
stops: [0.2, 0.5, 0.8]
),
),
),
Positioned(
top: medias.viewPadding.top + medias.size.height * 0.1,
left: 0,
right: 0,
child: Container(
height: 200,
width: 200,
child: Image(
image: AssetImage('assets/spotify.png'),
fit: BoxFit.scaleDown,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: medias.size.height * 0.35,
child: Column(...),
),
),
],
),
Use column with the wrap of singleChildScrollView instead of the stack.
Something like this.
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xff96979C), Color(0xff636669), Color(0xff25252D)],
stops: [0.2, 0.5, 0.8]
),
),
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 50),
height: 200,
width: 200,
child: Image(
image: AssetImage('assets/spotify.png'),
fit: BoxFit.scaleDown,
),
),
Container(
height: medias.size.height * 0.35,
child: Column(...),
),
],
),
),
)
I am trying to find the solution for this type of effect for 1 day in youtube, websites, official website of flutter but I do not find like this. Any one knew how to implement this blurry effect at the edge of the corner of Container Widget?
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
colors: [Colors.white.withOpacity(0.05),Colors.white],
stops: [0.1, 1],
tileMode: TileMode.mirror,
begin: Alignment.topCenter,
end: Alignment.bottomCenter
).createShader(bounds);
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,height: 50,
color: Colors.red,
),
Container(
width: 50,height: 50,
color: Colors.blue,
),
Container(
width: 50,height: 50,
color: Colors.black,
),
Container(
width: 50,height: 50,
color: Colors.red,
),
Container(
width: 50,height: 50,
color: Colors.blue,
),
Container(
width: 50,height: 50,
color: Colors.black,
),
],
)
)
How to add gradient color in the background of a card ? Should I reproduce this card with a container and a box decoration or is there another simple way ?
Try below code hope it help to you in below answer change Color your need.
Card(
child: Container(
height: 50,
width: 150,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.yellow,
Colors.orangeAccent,
Colors.yellow.shade300,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Container(), //declare your widget here
),
),
Your Card look like->
If you are gradient background to card or gradient border to card try below code
Container(
height: 50,
width: 150,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.yellow,
Colors.orangeAccent,
Colors.yellow.shade300,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child:Card(
color:Colors.white,
child: Container(), //declare your widget here
),
),
Your Screen like ->
I know it's a bit late, but you can try this to achieve a card gradient with border radius
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black38,
blurRadius: 3.0,
spreadRadius: 0.0,
offset: Offset(1.0, 1.0),
)
],
gradient: LinearGradient(
colors: [startColor, endColor],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
),
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 6),
TextWidget(
title,
typographyToken: TypographyToken.text14SemiBold,
color: Colors.white,
),
const SizedBox(height: 8),
TextWidget(
"$pendingCount Pending Request",
typographyToken: TypographyToken.text10,
color: Colors.white,
),
const SizedBox(height: 6),
],
),
),
);
Result :
result
This is a sample that I tried just now. Works fine for me.
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black, Colors.white],
begin: Alignment.topLeft,
end: Alignment.bottomRight)),
)
Another way and probably the best in my opinion:
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.center,
colors: [Colors.deepOrangeAccent, Colors.orange],
),
),
width: 300,
height: 300,
child: Card(
color: Colors.transparent,
),
),
Output:
Click here to view
Card(
shadowColor: tabColorAmber,
elevation: 10,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
gradient: LinearGradient(colors: [
Colors.orangeAccent,
Colors.orangeAccent,
Colors.yellow.shade100,
])),
width: double.infinity,
height: 140,
),
),
Example
I am using a stack, where the save 60% off widget is on top of the container with white background. I am using gradient on the discount container. I want the gradient to be solid , but as you can see in the image, it is semi-transparent and we can see the white background under it.
My stack code is:
Container(
width: width * 0.38,
height: 250,
child: Stack(
children: [
Positioned(
top: 20,
child: InkWell(
onTap: () {},
child: Container(
width: width * 0.38,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 35.h),
buildProductPrice(product, _intros),
buildCheckMark(product),
],
),
),
),
),
Align(
alignment: Alignment.topCenter,
child: buildDiscountText(product, _intros)),
],
),
);
buildDiscountText widget:
return Container(
height: 40,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.lightBlue.withOpacity(0.8),
Color(0xffCE41FD),
],
end: Alignment.centerRight,
begin: Alignment.centerLeft,
),
borderRadius: BorderRadius.circular(20)),
child: Text(
'SAVE $_rounded %',
style: _saveTextStyle,
),
);
To get solid background I could wrap buildDiscountTextWidget with Container and provide same gradient and do this 2,3 times but I don't think that is the proper way.
here is the screen shot of the widget
You just need to remove .withOpacity(0.8) from the end of Colors.lightBlue.withOpacity(0.8)
Change buildDiscountText widget as follows:
return Container(
height: 40,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.lightBlue, //remove opacity
Color(0xffCE41FD),
],
end: Alignment.centerRight,
begin: Alignment.centerLeft,
),
borderRadius: BorderRadius.circular(20)),
child: Text(
'SAVE $_rounded %',
style: _saveTextStyle,
),
);