flutter: How to achieve the gradually fading text in a ListView?

Question

I want to achieve the style like the picture. A ListView containing a few Container, and each container has some text. When scrolling the ListView, I want to gradually faded part of the content of the last Container. The last means the one displayed in the bottom of the ListView.

this is what I have done. Some explanation: timeTable is a widget in front of the ListView, and statisticItem is exactly the Container that I mentioned above.

body: Column(
      children: <Widget>[
        timeTable(),
        SizedBox(height: 18,),
        Expanded(
          child: ListView.separated(
            itemCount: 5,
            separatorBuilder: (context, index) => SizedBox(height: 24.0,),
            itemBuilder: (context, index) => statisticItem(),
          ),
        )
      ],
    )

Also, I have made some effort in shaderMask, but I can only change the background color. Any idea I'll we very appreciative.

Answer 1

It could be something like:

body: Column(
    children: <Widget>[
      timeTable(),
      SizedBox(
        height: 18,
      ),
      Expanded(
        child: Stack(
          child: ListView.separated(
            itemCount: 5,
            separatorBuilder: (context, index) => SizedBox(
              height: 24.0,
            ),
            itemBuilder: (context, index) => statisticItem(),
          ),
          FadeEndListView(),
        ),
      )
    ],
  ),

Where FadeEndListView is:

class FadeEndListView extends StatelessWidget {
  const FadeEndListView({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      height: 70,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: [0.0, 1.0],
            colors: [
              Theme.of(context).scaffoldBackgroundColor.withOpacity(0.0),
              Theme.of(context).scaffoldBackgroundColor,
            ],
          ),
        ),
      ),
    );
  }
}

My answer is from: Fading Edge ListView - Flutter The answer of Yariv.A. with small changes.

Answer 2

You can use flutter pub package.

fading_edge_scrollview

Answer 3

Sliver can be used. SliverList, SliverAppbar. It is used for custom scroll effects. Custom Scroll view can also be tried. I found this question similar. How to fade in/out a widget from SliverAppBar while scrolling?

Answer 4

As mentioned before by @Salim Murshed https://pub.dev/packages/fading_edge_scrollview worked for me, but I thought I'd add some of the changes you may want to make.

I altered two values within the package to achieve the desired strength of fade at the top and bottom of the list:

    double gradientFractionOnStart = 0.0,
    double gradientFractionOnEnd = 1.0,
    

Here is my test code page for this:

    final _controller = ScrollController();

    @override
    Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 190,
          width: 200,
          child: Column(
            children: <Widget>[
              Expanded(
                child: FadingEdgeScrollView.fromScrollView(
                  child: ListView.separated(
                    controller: _controller,
                    itemCount: 50,
                    separatorBuilder: (context, index) => SizedBox(
                      height: 14.0,
                    ),
                    itemBuilder: (context, index) => Text(
                      '${index+1} Item ${index+1}) - Test',
                      style: TextStyle(color: Colors.black, fontSize: 17, 
                      fontWeight: FontWeight.w900),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ));
}

Output display of the code