Flutter : 期待通りの白と透明のグラデーション(white and transparent gradient)

最近はまったポイントを共有させていただきます。

I would like to share a point that I have been stuck on recently.

白と透明のグラデーションが欲しかったので下記のように書いたら明らかにグレイが混ざって、期待と違うものになりました。

I wanted a gradation of white and transparent, so when I wrote the following, gray was clearly mixed, and it turned out different from what I expected.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Icons',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(),
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops:[0.0,0.6],
              colors: [
                //Colors.white.withOpacity(0.0),
                Colors.transparent,
                Colors.white,
              ],
            ),
          ),
          width: double.infinity,
          height: 250.0,
        ),
      ),
    );
  }
}

何故かはわかりませんがこれで期待通りのグラデーションになりました。

I don’t know why, but this made the gradation as expected.

              colors: [
                //Colors.white.withOpacity(0.0),
                Colors.transparent,
                Colors.white,
              ],
...

参考

https://stackoverflow.com/questions/71566766/flutter-lineargradient-transparent-to-white-overlay