🫥
Widget全体にグラデーションをかけて透過させる
概要
次の図のような、右側にもまだありますよ的なレイアウトを実装したいときのお話です。
所感
なんとなく、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