How to apply Linear gradient on box decoration in flutter?
Solution 1
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,
),
],
),
],
),
),
),
],
),
);
}
}
Solution 2
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),
]
)
),
)
)
Guest
Updated on December 27, 2022Comments
-
Guest over 1 year
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!!