Flutter 画像をグラデーションで透過させる

結論（コード）

import 'package:flutter/material.dart';

class APage extends StatelessWidget {
  const APage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              flex: 5,
              child: Container(
                width: double.infinity,
                // ①背景画像のセット
                decoration: const BoxDecoration(
                  color: Colors.transparent,
                  image: DecorationImage(
                    image: AssetImage('assets/background.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
                // ②Containerを重ねる
                child: Container(
                  decoration: const BoxDecoration(
                    // ③グラデーション
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      // ④透明→白
                      colors: [
                        Colors.transparent,
                        Colors.white,
                      ],
                    ),
                  ),
                  child: const Center(
                    child: Text('グラデーション部分'),
                  ),
                ),
              ),
            ),
            const Expanded(
              flex: 5,
              child: Center(child: Text('下部')),
            ),
          ],
        ),
      ),
    );
  }
}

スクショ

ポイント

1. Containerの背景画像として画像を表示する
2. 背景画像をセットしたContainerの子要素にContainerをセットする
3. BoxDecorationを使ってグラデーションの設定をする
4. グラデーションの色の設定をtransparent(透明)からwhite(白)にする

背景

かっこいいログイン画面を作ろうと思っていたら、背景画像の下側をグラデーションかけて徐々に白くなっていたものがあったので、真似しようと思ったが、あまりググっても出てこず、苦戦した。Containerを重ねることで実現できることがわかったので、そのように実装した例。