FlutterでGradientにopacityを適応させる（foregroundDecoration）

はじめに

今回、デザインでは左のようなものが要求されていたのにグラデーションの設定をしてみたら右のように...
ちょっとした設定をすれば解決しますが備忘録として記録します。

ゴールの状態	初期の実装

以下のコードをご覧ください。

return Scaffold(
  backgroundColor: Colors.black,
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: const Text('デモアプリ'),
  ),
  body: Center(
      child: Container(
    width: 160,
    height: 160,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16),
      color: Colors.white,
    ),
  )),
);

簡単なレイアウトですが以下のようになります。

グラデーションの適応

では次に、このままグラデーションの適応をしてみましょう。

return Scaffold(
  backgroundColor: Colors.black,
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: const Text('デモアプリ'),
  ),
  body: Center(
    child: Container(
      width: 160,
      height: 160,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: const LinearGradient(
          colors: [
            Colors.lightGreenAccent,
            Colors.lightBlueAccent,
          ],
        ),
        color: Colors.white,
      ),
    ),
  ),
);

透明度を設定する

デザインの意向として、グラデーションに透明度の設定をしたい場合があるとします。
では素直に設定してみましょう

return Scaffold(
  backgroundColor: Colors.black,
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: const Text('デモアプリ'),
  ),
  body: Center(
    child: Container(
      width: 160,
      height: 160,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: LinearGradient(
          colors: [
            Colors.lightGreenAccent.withOpacity(0.5),
            Colors.lightBlueAccent.withOpacity(0.5),
          ],
        ),
      ),
    ),
  ),
);

そうですね。
背景が黒なのでこのままでは背景の黒が透けて見えるため暗い印象です。
ではcolorをしてみましょう。

colorの設定をしてみる

return Scaffold(
  backgroundColor: Colors.black,
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: const Text('デモアプリ'),
  ),
  body: Center(
    child: Container(
      width: 160,
      height: 160,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: LinearGradient(
          colors: [
            Colors.lightGreenAccent.withOpacity(0.5),
            Colors.lightBlueAccent.withOpacity(0.5),
          ],
        ),
+        color: Colors.white,
      ),
    ),
  ),
);

おや、変わりませんね。
そうです。colorとgradientを同時に設定をした場合gradientが優先されるだけです。

対策「foregroundDecoration」を併用する

Flutterではよくグラデーション = Container.decorationと思いつきますが、ContainerにはforegroundDecorationというパラメーターが存在します！
今回はdecorationとかけ合わせて使います。

return Scaffold(
  backgroundColor: Colors.black,
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: const Text('デモアプリ'),
  ),
  body: Center(
    child: Container(
      width: 160,
      height: 160,
      // 背景側の設定
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        color: Colors.white,
      ),
      // グラデーションの設定
      foregroundDecoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: LinearGradient(
          colors: [
            Colors.lightGreenAccent.withOpacity(0.5),
            Colors.lightBlueAccent.withOpacity(0.5),
          ],
        ),
      ),
    ),
  ),
);