web-dev-qa-db-ja.com

Flutter-画像をグラデーション色にブレンドする方法は？

デザイナーがアプリ用に作成したログイン画面のデザインを複製しようとしています。

背景画像は、softLightのblendModeを使用します。キャッチするのは、ブレンドする色がグラデーション色であることです。次に、実際には異なるグラデーションの2つのレイヤーがあります（1つは紫のグラデーション、1つは青のグラデーション）

元の画像：

Original Image

最終グラデーション画像

Final Gradient Image

今、私はcolorBlendModeを使用してみました、例えば.

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

問題は、色のプロパティが単色しか取らないことです。

次に、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]
        ),
      ),
    ),

これは私が望むものに多少近いものを与えてくれますが、私が必要としているものとは完全には違います。

誰もこれを達成する方法を知っていますか？

編集：

また、2つの画像をブレンドすることも考えていましたが、不透明度などを使用する以外に、その方法を見つけることができませんでした。理想的には、それを達成するために「ハック」を使用するのではなく、ネイティブにレンダリングされることが望まれます。

dartfluttergradientblend-mode
10
Robert Stevens

Stackを使用してこの効果を簡単に取得できます。

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

乾杯

17
Abhishek Razy

あなたもこれを試すことができます：

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.red.withOpacity(0.4), BlendMode.srcOver),
  child: YourWidget(),
)
2
CopsOnRoad