Как отобразить изображение с верхней и нижней градиентной тенью во флаттере?

Question

Я работаю над флаттером, чтобы отобразить изображение с верхним и нижним наложением градиента. Некоторая часть изображения сверху и снизу должна отображаться с тенью, покрытой другим цветом, например серым.

Пожалуйста, найдите прикрепленное изображение для справки, которое я нарисовал.

Я использовал контейнер с CachedNetworkImage. И попробовал использовать BoxDecoration. Что не дает мне ожидаемого результата. Эффект с приведенным ниже кодом только применение тени под изображением. Но я хотел бы отобразить поверх моего изображения эффект наложения верхнего и нижнего градиента.

Пожалуйста, предоставьте мне предложение.

Ссылка на код:

 Container(
  height: 174.0,
  width: 116.0,
    decoration: new BoxDecoration(
    boxShadow: [
    BoxShadow(
    color: Colors.red,
    blurRadius: 20.0, // has the effect of softening the shadow
    spreadRadius: 5.0, // has the effect of extending the shadow
    offset: Offset(
    10.0, // horizontal, move right 10
    10.0, // vertical, move down 10
),
)
],),
child: CachedNetworkImage(...),

Изображение для представления ожидания:

Answer 1

в качестве опции, вы можете управлять распространением черного цвета, изменяя stops значения

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 116.0,
            height: 174.0,
            foregroundDecoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.black, Colors.transparent, Colors.transparent, Colors.black],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0, 0.2, 0.8, 1],
              ),
            ),
            child: Image.network('https://i.picsum.photos/id/200/400/600.jpg'),
          ),
        ),
      ),
    );
  }
}

Answer 2

Я написал код ниже для украшения верхней и нижней теневых рамок, это означает, что будет два контейнера. Вы можете использовать это решение двумя способами:

1. Вложенные контейнеры, которые должны поместить ваше изображение в Контейнер (topShadow) => Контейнер (bottomShadow) => Изображение

2. Поместите ваши 2 контейнера и ваше изображение в стек, выровняйте контейнеры сверху и снизу и присвойте своим контейнерам фиксированную высоту, аналогичную области, отмеченной на фотографии. (Убедитесь, что контейнеры находятся ниже элемента изображения внутри стека, иначе тень будет покрыта изображением)

 decoration: new BoxDecoration(
                gradient: new LinearGradient(
                  end: const Alignment(0.0, -1),
                  begin: const Alignment(0.0, 0.6),
                  colors: <Color>[
                    const Color(0x8A000000),
                    Colors.black12.withOpacity(0.0)
                  ],
                ),

              ),


decoration: new BoxDecoration(
                gradient: new LinearGradient(
                  end: const Alignment(0.0, -1),
                  begin: const Alignment(0.0, 0.6),
                  colors: <Color>[
                    const Color(0x8A000000),
                    Colors.black12.withOpacity(0.0)
                  ],
                ),

              ),

Рабочий код второго подхода (пункт 2):

Stack(
            children: <Widget>[
            //image code
            Image(..),
            //top grey shadow
            Align(
                alignment: Alignment.topCenter,
                child: Container(
                  height: 50,
                  width: double.infinity,
                  decoration: new BoxDecoration(
                    gradient: new LinearGradient(
                      end: const Alignment(0.0, 0.4),
                      begin: const Alignment(0.0, -1),
                      colors: <Color>[
                        const Color(0x8A000000),
                        Colors.black12.withOpacity(0.0)
                      ],
                    ),

                  ),
                ),
              ),
              //bottom grey shadow
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: 50,
                  width: double.infinity,
                  decoration: new BoxDecoration(
                    gradient: new LinearGradient(
                      end: const Alignment(0.0, -1),
                      begin: const Alignment(0.0, 0.4),
                      colors: <Color>[
                        const Color(0x8A000000),
                        Colors.black12.withOpacity(0.0)
                      ],
                    ),

                  ),
                ),
              ),

            ],),