LinearGradient(
//tileMode: TileMode.clamp,
colors: [
kRecordButtonColor.withOpacity(0.4),
kRecordButtonColor,
kRecordButtonColor,
kRecordButtonColor.withOpacity(0.4),
],
stops: const [
0,
0.2,
0.8,
1,
],
),
As you can see this code only helps me get gradients across 2 edges, I need it along all 4 edges.
Try this instead of your Container:
Stack(
alignment: Alignment.center,
children: [
Container(
margin: EdgeInsets.all(16.0),
width: 55,
height: 55,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [
Colors.red.withOpacity(0.5),
Colors.red,
Colors.red,
Colors.red.withOpacity(0.5),
],
stops: const [
0,
0.2,
0.8,
1,
],
)),
),
Container(
margin: EdgeInsets.all(16.0),
width: 55,
height: 55,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.0),
Colors.white.withOpacity(0.0),
Colors.white.withOpacity(0.5),
],
stops: const [
0,
0.2,
0.8,
1,
],
)),
),
],
),
Related
how make gradient at flutter like this image?, i think this gradient make like 3D Effect
Try this:
Container(
width: 200,
height: 240,
child: Icon(Icons.android, size: 60, color: Colors.grey[100]),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(42)),
boxShadow: [
BoxShadow(
color: Colors.deepOrange[400],
offset: const Offset(0, 20),
blurRadius: 30,
spreadRadius: -5,
),
],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomCenter,
colors: [
Colors.deepOrange[200],
Colors.deepOrange[300],
Colors.deepOrange[500],
Colors.deepOrange[500],
],
stops: const [
0.1,
0.3,
0.9,
1.0
])),
),
Result:
How can I create this shadow blur in the top and bottom of the Widget that appears to be on top of the list?
try to wrap your child with Stack and a mask:
Stack(
children: [
//_yourWidget(),
Opacity(
opacity: 0.5,
child: Container(
width: 50.0,
height: 50.0,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.black,
Colors.transparent,
Colors.transparent,
Colors.black,
],
stops: [
0,
0.2,
0.8,
1,
],
),
),
),
),
],
)
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
Above is the expected output.
I need to implement this gradient in Flutter but it's not coming out as excepted.
Color: #6646E7
The color shift is very strict and not smooth as shown in the image.
Below is the container where I wanted to use the
Complete Code:
Stack(
alignment: Alignment.bottomRight,
children: [
Container(
margin: const EdgeInsets.only(left: 10, right: 10, top: 15),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white,
border: Border.all(color: Colors.white, width: 2),
// gradient: LinearGradient(
// begin: Alignment.topLeft,
// end: Alignment.bottomRight,
// stops: const [
// 0.01,
// 0.1,
// 0.9
// ],
// colors: [
// const Color(0xff6646E7).withOpacity(0.4),
// Colors.white,
// const Color(0xff6646E7).withOpacity(0.4),
// ]),
// boxShadow: [
// const BoxShadow(
// color: Color.fromRGBO(0, 0, 0, 0.25),
// blurRadius: 3,
// spreadRadius: 1,
// offset: Offset(0, 4))
// ]),
),
child: Column(
children: [
Row(
children: [
SvgPicture.asset('assets/profile/$icon.svg'),
const SizedBox(
width: 10,
),
Text(
title,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
fontFamily: GoogleFonts.poppins().fontFamily),
)
],
),
const SizedBox(
height: 20,
),
child
],
),
),
Positioned(
right: 10,
child: GestureDetector(
onTap: onEditPressed,
child: SvgPicture.asset('assets/profile/edit_pen.svg')),
)
],
);
Thanks for your help
Try this,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.black38,
Colors.black12,
Colors.black12,
Colors.black38,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
Change Colors.black38 & Colors.black12 with your desired colors.
I have this gradient on Android:
<gradient
android:angle="45.0"
android:centerColor="#ffeeeeee"
android:endColor="#ffbbbbbb"
android:startColor="#ffcccccc" />
I want it to replicate it on flutter but I'm unable to do so.
I have tried to use a LinearGradient but doesn't even come close to the one on Android.
I tried this:
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [
Color(0xffeeeeee),
Color(0xffcccccc),
Color(0xffbbbbbb),
],
begin: Alignment(-1.0, -4.0),
end: Alignment(1.0, 4.0),
),
),
Thanks
You can do it like this
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.orange],
begin: Alignment.topLeft,
end: Alignment.bottomRight)),
child: Container(
)),
);
For color code, do like this
Color hexToColor(String code) {
return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
}
Try to add gradient as:
Container(height: 200,
width: 350,
decoration: BoxDecoration(
color: Colors.white,
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
Color.fromRGBO(0, 0, 0, 0.0),
Color.fromRGBO(0, 0, 0, 0.25),
Color.fromRGBO(0, 0, 0, 0.7),
],
stops: [0.5, 0.7, 0.9],
)),
),