Zenn
🫥

Widget全体にグラデーションをかけて透過させる

2024/04/03に公開
Flutter
tech

概要

次の図のような、右側にもまだありますよ的なレイアウトを実装したいときのお話です。

所感

なんとなく、Container の decoration でどうにかなるかな・・と思ったりもしましたが、背景にしか対応できなかったり、Opacity では全体を透過できてもグラデーションができなかったり・・とうまくいきませんでした。

実装

正解は、ShaderMask でした。
グラデーションをかけたい Widget に対して、下記のような実装をします。

ShaderMask(
  shaderCallback: (bounds) {
    return const LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.white,
        Colors.transparent,
      ],
      stops: [  // どこからどこまでグラデーションをかけるかはお好み
        0.90,
        0.95,
      ],
    ).createShader(bounds);
  },
  child: // グラデーションで透過させたいWidget
)

ListView （横スクロール）にかけると、最初の図のような感じで表示されます。ちょっとおしゃれ感でます。

最後に

実装してるうちに、これは無理なのかな・・と思ったりもしましたが、なんとか見つかってよかったです。Flutterは、デザインに関してかなり柔軟に対応できるのが素晴らしいですね。

Discussion