Guest
Reputation: 127
How to apply Linear gradient on box decoration in flutter?
Below is the UI that I want to build,
Currently, I have used linear gradient to achieve this. But the issue is the linear gradient disappears when I use image in the Box Decoration.
Below is the code,
child: Container(
padding: EdgeInsets.all(10.0),
height: 180,
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: ColorSet.primaryGrey,
blurRadius: 5,
offset: Offset(0, 7),
),
],
gradient: LinearGradient(
colors: [ColorSet.primaryRed, Colors.transparent, Colors.transparent, ColorSet.primaryRed],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0, 0.6, 1],
),
//On uncommenting the below three lines, I do not see the linear gradient
// image: DecorationImage(
// image: AssetImage("lib/assets/images/event.jpg"),
// fit: BoxFit.cover,
// ),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
//place this container to right side
constraints: BoxConstraints(maxWidth: 60.0),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white.withOpacity(0.8)),
child: Row(
children: [
Icon(
CustomIcons.test,
color: ColorSet.primaryRed,
),
Text(
flames.toString(),
style: TextStyles.captionStyle.copyWith(
color: ColorSet.primaryRed,
fontWeight: FontWeight.bold,
fontSize: 17.0),
),
],
),
),
//display event name, start/end dates times and duration in a column
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('${name}',
style: TextStyles.titleStyle.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0)),
SizedBox(
height: 3.0,
),
],
),
],
),
),
),
Basically I need linear gradient to be displayed on the image. As mentioned in the above code (In comments), if I remove the image in Box Decoration, the linear gradient works perfectly fine. But on adding the image back, the linear gradient is missing. I guess the linear gradient is not applying on the image.
Kindly help!!
Upvotes: 7
Views: 14325
Answers (3)
c4m3lion
Reputation: 43
With help of card it is much easier
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: InkWell(
onTap: () => {},
child: Ink.image(
image: AssetImage(
'images/logo2.png',
),
fit: BoxFit.fill,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
);
}
I did this way
Instead of 2 widget I used 1 with foreground and decoration attributes
Container(
height: 150,
width: 150,
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withOpacity(.0),
Colors.black.withOpacity(1),
],
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
image: DecorationImage(
image: AssetImage('images/logo2.png'),
),
),
),
Upvotes: 2
Thierry
Reputation: 8383
A solution would be to Stack your current Container (with the LinearGradient and the Container child) on top of another Container defining the BoxShadow and the DecorationImage:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Scan with Time',
home: Scaffold(
body: MyWidget(),
),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10.0),
width: 240,
height: 480,
child: Stack(
children: [
Positioned.fill(
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blueGrey,
blurRadius: 5,
offset: Offset(0, 7),
),
],
image: DecorationImage(
image: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg/1280px-Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg'),
fit: BoxFit.cover,
),
),
),
),
Positioned.fill(
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
gradient: LinearGradient(
colors: [
Colors.red,
Colors.transparent,
Colors.transparent,
Colors.red
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0, 0.6, 1],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
//place this container to right side
constraints: BoxConstraints(maxWidth: 240.0),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white.withOpacity(0.8)),
child: Row(
children: [
Icon(
Icons.directions_bike,
color: Colors.red,
),
Text(
'5',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 17.0,
),
),
],
),
),
//display event name, start/end dates times and duration in a column
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('NAME',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0)),
SizedBox(
height: 3.0,
),
],
),
],
),
),
),
],
),
);
}
}
Upvotes: 16
Avinash
Reputation: 597
do something like this for gradient and background image.
Container(
decoration: BoxDecoration(
image:
DecorationImage(image: AssetImage(image), fit: BoxFit.cover)),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.black.withOpacity(.3),
Colors.black.withOpacity(.3),
]
)
),
)
)
Upvotes: 15
Related Questions
- how to create vertical linear gradient in flutter?
- Container gradient width in decoration flutter
- Flutter Image with Gradient Border color
- if gradient is passed then gradient or color in box decoration
- Flutter - Is there any way to apply a gradient color to an image in a BoxDecoration?
- Make gradient effect at container flutter,
- How do I add color gradient to Card in flutter
- How to add linear gradient to a rounded container in flutter?
- How does one put a Flutter BoxDecoration gradient over a BoxDecoration image?
- Gradient with effect of 3d Container in Flutter