Флаттер - Как смешать изображение с градиентным цветом? - PullRequest
Новая
       20

Флаттер - Как смешать изображение с градиентным цветом?

0 голосов
/ 05 июля 2018

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

Фоновое изображение использует blendMode из softLight, уловка в том, что цвет, с которым оно смешивается, является градиентным цветом. Во-вторых, на самом деле есть два слоя разных градиентов (один фиолетовый градиент, один синий градиент)

Исходное изображение:

Original Image

Окончательное изображение градиента

Final Gradient Image

Теперь я попытался использовать colorBlendMode, например, 

Image.asset(
      'assets/pioneer-party.jpg',
      fit: BoxFit.cover,
      color: Color(0xff0d69ff).withOpacity(1.0),
      colorBlendMode: BlendMode.softLight,
    ),

Проблема в том, что свойство color принимает только один цвет.

Затем я попробовал BoxDecoration, например, 

DecoratedBox(
      decoration: new BoxDecoration(
        color: const Color(0xff7c94b6),
        image: new DecorationImage(
          fit: BoxFit.cover,
          colorFilter: new ColorFilter.mode(Colors.purple.withOpacity(1.0), BlendMode.softLight),
          image: new NetworkImage(
            'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
          ),
        ),
      ),
    ),

Что все еще оставляет меня с той же проблемой. Затем я попытался сложить каждый слой по отдельности, а затем поиграть с градиентами, чтобы он выглядел близко к дизайну, например 

Image.asset(
      'assets/pioneer-party.jpg',
      fit: BoxFit.cover,
      color: Color(0xff0d69ff).withOpacity(1.0),
      colorBlendMode: BlendMode.softLight,
    ),
    DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: FractionalOffset.topCenter,
          end: FractionalOffset.bottomCenter,
          colors: [
            Color(0xff0d69ff).withOpacity(0.0),
            Color(0xff0069ff).withOpacity(0.8),
          ],
        ),
      ),
    ),
    DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: FractionalOffset.topLeft,
          end: FractionalOffset.bottomRight,
          colors: [
            Color(0xff692eff).withOpacity(0.8),
            Color(0xff642cf4).withOpacity(0.8),
            Color(0xff602ae9).withOpacity(0.8),
            Color(0xff5224c8).withOpacity(0.8),
            Color(0xff5e29e5).withOpacity(0.8),
          ],
        stops: [0.0,0.25,0.5,0.75,1.0]
        ),
      ),
    ),

Что дает мне несколько близкое к тому, что я хочу, но не совсем то, что мне нужно.

Кто-нибудь знает способ достижения этого?

EDIT:

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

1 Ответ

0 голосов
/ 06 ноября 2018

Используйте Стек, чтобы получить этот эффект. Очень просто. 

   Stack(children: <Widget>[
        Container(
          decoration: BoxDecoration(
            color: Colors.transparent,
            image: DecorationImage(
              fit: BoxFit.fill,
              image: AssetImage(
                'images/bg.jpg',
              ),
            ),
          ),
          height: 350.0,
        ),
        Container(
          height: 350.0,
          decoration: BoxDecoration(
              color: Colors.white,
              gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [
                    Colors.grey.withOpacity(0.0),
                    Colors.black,
                  ],
                  stops: [
                    0.0,
                    1.0
                  ])),
        )
      ]),

Приветствия

...