How can i made this decoration? - flutter

Question

Screen
Hello all, how can i make tis fade in ? between 2 container. I have a row with 3 columns and an another to columns.
This is my app :
class _FilmPageState extends State<FilmPage> {
final urlImage = "assets/images/Spider-Man No way home poster.jpg";
#override
Widget build(BuildContext context) => Scaffold(
drawer: NavigationMenu(),
// endDrawer: NavigationDrawerWidget(),
appBar: PreferredSize(
preferredSize: Size.fromHeight(270),
child: AppBar(
elevation: 0,
flexibleSpace: Image(
image: AssetImage(urlImage),
fit: BoxFit.cover,
),
),
),
body: Column(
children: [
FilmTitle(),
FilmSection(),
],
)
);
}
This is my film section, with the row, colums and containers :
Inside we have the details about the section, I want to know how can i make the border side decoration not full like a screen ?
class FilmSection extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
color: digital_blueb,
child: Column(
children: [
Row(
children: [
Column(
children: [
Container(
width: 70,
height: 125,
child: Center(
child: Text("85%", style: TextStyle(fontSize: 20, color: Colors.white)),
),
decoration: ShapeDecoration(
color: digital_blueb,
shape: CircleBorder(
side: BorderSide(
width: 5,
color: digital_green,
)
)
),
),
Container(
child: Center(
child: (Text("Note du public", style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold,fontSize: 15))
),
),
),
],
),
Column(
children: [
Container(
height: 110,
width: 50,
child: VerticalDivider(color: Colors.white),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
children: [
Text("2h30",style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold)),
],
),
),
SizedBox(height: 15),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
children: [
Text("15 Décembre 2021", style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold)),
],
),
),
SizedBox(height: 15),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
children: [
Text("Action/Aventure", style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold)),
],
),
),
SizedBox(height: 15),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
children: [
Text("Tous publics", style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold)),
],
),
),
],
),
],
),

Answer 1

Try this, in your FilmTitle(), Stack a gradient color container:
Stack(
children:[
AspectRatio(
ratio: 1,
child: image.Network(''),
),
AspectRatio(
ratio: 1,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [
0.1,
0.7,
0.9,
],
colors: [
Colors.transparent,
Colors.transparent,
digital_blueb,
],
)
),
),
],
),