main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(ColoredAnimationWithScroll());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: CustomScrollView(
          physics: const ClampingScrollPhysics(),
          slivers: [
            SliverPersistentHeader(
              delegate: ColoredAnimationAppbar(),
              pinned: true,
            ),
            SliverToBoxAdapter(
              child: Container(height: 700),
            ),
          ],
        ),
      ),
    );
  }
}

double getFractionalValue(double max, double min, double current) {
  return (current - min) / (max - min);
}

class ColoredAnimationAppbar extends SliverPersistentHeaderDelegate {
  final appBarColorTween = ColorTween(begin: Colors.pink, end: Colors.orange);

  double getAppBarColor(double shrinkOffset) {
    // animation starts when appBar is of size 250, and ends when appBar is of size 150
    // so shrinkOffset should be b/w 50 and 150

    if (shrinkOffset < 50) {
      return 0.0; // animation hasn't started
    }

    if (shrinkOffset > 150) {
      return 1.0; // animation is completed
    }

    // map the value between 0 to 1, it indicates the amount of animation completed
    return getFractionalValue(150, 50, shrinkOffset);
  }

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      width: MediaQuery.of(context).size.width,
      color: appBarColorTween.transform(getAppBarColor(shrinkOffset)),
    );
  }

  @override
  double get maxExtent => 300;

  @override
  double get minExtent => 60;

  @override
  bool shouldRebuild(ColoredAnimationAppbar oldDelegate) {
    return true;
  }
}