How to fade out bottom when a wiget overflow ConstrainedBox?

Question

I wrote a list of card, and limit its max height. I want the card bottom fade when its height is over the limit, fade is not displayed when the limit is not exceeded.

The following is the effect I want

my code

Widget _buildBody(BuildContext context) {
return CustomScrollView(
  slivers: [
    SliverList(
        delegate: SliverChildBuilderDelegate(
      (context, index) {
        return ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 200),
          child: Wrap(
            children: [
              const Card(
                child: ListTile(
                  title: Text('test title'),
                  subtitle: Text(
                      'test \n test \n test test test test test test test test test testtest test test test test test test test '),
                ),
              ),
            ],
          ),
        );
      },
      childCount: 10,
    ))
  ],
);

Answer 1

I think you were meaning to constrain the height of the individual cards:

Using a ShaderMask you can achieve this effect:

CustomScrollView(
        slivers: [
          SliverList(
              delegate: SliverChildBuilderDelegate(
            (context, index) {
              return Wrap(
                children: [
                  ConstrainedBox(
                    constraints:
                        const BoxConstraints(maxHeight: 200),
                    child: Card(
                      color: Colors.white,
                      child: ListTile(
                        title: Text('test title',),
                        subtitle: ShaderMask(
                          shaderCallback: (bounds) => LinearGradient(
                            begin: Alignment.center,
                            end: Alignment.bottomCenter,
                            colors: [Colors.white, Colors.transparent],
                          ).createShader(bounds),
                          child: Text('test \n test \n test test test test test test test test test testtest test test test test test test test test test test test test test test test test test testtest test test test test test test test ',),
                        ),
                      ),
                    ),
                  ),
                ],
              );
            },
            childCount: 10,
          ))
        ],
      ),