How can i made this decoration?

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,
            ],
          )
        ),
    ),
  ],
),