I am trying to change the background color to white when user scrolled. The code below is working when using white as color, but if i am using other color like grey, it will show grey as background color after scrolled(I want it to be white when scrolled).

CircleAvatar(
              radius: 15,
              backgroundColor: Colors.white.withOpacity(
                  (scrollOffset / 250).clamp(0.2, 1).toDouble()),
              child: const Icon(
                Icons.chevron_left,
                color: Colors.black,
              ),
            ),

How can i make something like this?

Before:

After:

Am i using the wrong way to achieve it? How can i actually make this happen?

CodePudding user response：

you can do this:

import 'package:flutter/material.dart';

class TestAnimation extends StatefulWidget {
   @override
  State<TestAnimation> createState() =>
      _TestAnimationState();
}

class _TestAnimationState extends State<TestAnimation>
    with TickerProviderStateMixin {
  final ScrollController controller = ScrollController();
  AnimationController _ColorAnimationController;
  Animation _colorTween;
  Animation _iconColorTween;

  bool _scrollListener(ScrollNotification scrollInfo) {
    if (scrollInfo.metrics.axis == Axis.vertical) {
      _ColorAnimationController.animateTo(scrollInfo.metrics.pixels / 350);
      return true;
    }
  }

  @override
  void initState() {
    super.initState();

    _ColorAnimationController =
        AnimationController(vsync: this, duration: Duration(seconds: 0));
    _colorTween = ColorTween(begin: Colors.transparent, end: Colors.black)
        .animate(_ColorAnimationController);
    _iconColorTween = ColorTween(begin: Colors.black, end: Colors.white)
        .animate(_ColorAnimationController);
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: _scrollListener,
      child: Scaffold(
        appBar: AppBar(
          leading: AnimatedBuilder(
            animation: _ColorAnimationController,
            builder: (context, child) {
              return CircleAvatar(
                radius: 15,
                backgroundColor: _colorTween.value,
                child: Icon(
                  Icons.chevron_left,
                  color: _iconColorTween.value,
                ),
              );
            },
          ),
        ),
        body: SingleChildScrollView(
          controller: controller,
          child: Text(
              'adasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdas asdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \nadasdasdasdasd \n adasdasda sad asd ads as da sdasdas sdasd \nadasdasdasdasd \n'),
        ),
      ),
    );
  }
}