flutter - Flutter Youtube风格图像黑色叠加

Question

如何在 flutter 中达到这种效果？

Answer 1

这会工作

Container(
        height: 200,
        child: Stack(
          children: [
            Image.network(
              'https://cdn.motor1.com/images/mgl/rBzVX/s1/most-expensive-cars.jpg',
              fit: BoxFit.cover,
            ),
            Container(
              height: 200,
              width: double.infinity,
              color: Colors.black54,
            ),
            Align(
              alignment: Alignment.centerRight,
              child: Container(
                height: 200,
                width: 100,
                color: Colors.black,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '50+',
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 16),
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    Icon(
                      Icons.play_circle_outline,
                      color: Colors.white,
                      size: 30,
                    )
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.play_arrow,
                    color: Colors.white,
                    size: 30,
                  ),
                  Text(
                    'PLAY ALL',
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 16),
                  )
                ],
              ),
            ),
          ],
        ),