Custom Sliver App bar problem

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);



  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 
  ScrollController controller = ScrollController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Column(
        children: [
          CustomSliverAppBar(controller: controller,),
          ListView.builder(
            itemBuilder: (context,i){
              return Container(
                height: 100,
                width: MediaQuery.of(context).size.width,
                color: Colors.red,
              );
            },
            itemCount: 35,
          ),
        ],),
      ),
    );
  }
}


class CustomSliverAppBar extends StatefulWidget {
  ScrollController controller;

  CustomSliverAppBar({required this.controller});

  @override
  _CustomSliverAppBarState createState() => _CustomSliverAppBarState();
}

class _CustomSliverAppBarState extends State<CustomSliverAppBar> {
  ValueNotifier<double> appbarHorizPadding = ValueNotifier(15);
  ValueNotifier<double> appBarheightCoeff = ValueNotifier(0.18);
  ValueNotifier<double> titleTextLeftPos = ValueNotifier(20.0);
  ValueNotifier<double> titleTextTopPos = ValueNotifier(60.0);
  ValueNotifier<double> titleTextSizeCoeff = ValueNotifier(1.0);
  ValueNotifier<double> circleAvatarSize = ValueNotifier(25.0);

  void animateAppBar() {
    if (widget.controller.position.pixels >=
        MediaQuery.of(context).size.height * 0.37 + 10.0) {
      if (appBarheightCoeff.value <= 0.12) {
        appBarheightCoeff.value = 0.12;
        appbarHorizPadding.value = 0;
        titleTextTopPos.value = 25.0;
        titleTextLeftPos.value = 115.0;
        titleTextSizeCoeff.value = 0.75;
        circleAvatarSize.value = 23.0;
      }
      appBarheightCoeff.value = appBarheightCoeff.value - 0.005;
      appbarHorizPadding.value = appbarHorizPadding.value - 0.5;
      titleTextTopPos.value = titleTextTopPos.value - 3.0;
      titleTextLeftPos.value = titleTextLeftPos.value + 7.0;
      titleTextSizeCoeff.value = titleTextSizeCoeff.value - 0.03;
      circleAvatarSize.value = circleAvatarSize.value - 0.5;
    } else if (widget.controller.position.pixels <=
        MediaQuery.of(context).size.height * 0.37 + 10.0) {
      if (appBarheightCoeff.value >= 0.18) {
        appBarheightCoeff.value = 0.18;
        appbarHorizPadding.value = 15;
        titleTextTopPos.value = 60.0;
        titleTextLeftPos.value = 20.0;
        titleTextSizeCoeff.value = 1.0;
        circleAvatarSize.value = 25.0;
      }
      appBarheightCoeff.value = appBarheightCoeff.value + 0.007;
      appbarHorizPadding.value = appbarHorizPadding.value + 0.5;
      titleTextTopPos.value = titleTextTopPos.value + 3.0;
      titleTextLeftPos.value = titleTextLeftPos.value - 7.0;
      titleTextSizeCoeff.value = titleTextSizeCoeff.value + 0.03;
      circleAvatarSize.value = circleAvatarSize.value + 0.5;
    }
  }

  @override
  void initState() {
    widget.controller.addListener(() {
      animateAppBar();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    double h = MediaQuery.of(context).size.height;
    double w = MediaQuery.of(context).size.width;
    return ValueListenableBuilder(
      valueListenable: appBarheightCoeff,
      builder: (context, v, c) {
        return Container(
          height: h * appBarheightCoeff.value,
          width: w - appbarHorizPadding.value,
          padding: MediaQuery.of(context).viewPadding.bottom > 0
              ? EdgeInsets.only(top: 35.0)
              : EdgeInsets.zero,
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(40.0),
              bottomRight: Radius.circular(40.0),
            ),
          ),
          child: Stack(
            children: [
              Positioned(
                child: Text(
                  "Balance",
                  textScaleFactor: 0.85,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold),
                ),
                top: 25.0,
                left: 20.0,
              ),
              ValueListenableBuilder(
                valueListenable: appBarheightCoeff,
                builder: (context, v, c) {
                  return Positioned(
                    top: titleTextTopPos.value,
                    left: titleTextLeftPos.value,
                    child: Row(
                      children: [
                        Column(
                          children: [
                            Text(
                              "\$25",
                              textScaleFactor: 0.85,

                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 25.0 * titleTextSizeCoeff.value,
                                  fontWeight: FontWeight.w900),
                            ),
                            Text(
                              "Available Funds",
                              textScaleFactor: 0.85,

                              style: TextStyle(
                                color: Colors.grey[300],
                                fontSize: 14.0 * titleTextSizeCoeff.value,
                              ),
                            ),
                          ],
                          crossAxisAlignment: CrossAxisAlignment.start,
                        ),
                        SizedBox(
                          width: 10.0,
                        ),
                        Column(
                          children: [
                            Text(
                              "\$825",
                              textScaleFactor: 0.85,

                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 25.0 * titleTextSizeCoeff.value,
                                  fontWeight: FontWeight.w900),
                            ),
                            Text(
                              "PIN Wallet",
                              textScaleFactor: 0.85,

                              style: TextStyle(
                                color: Colors.grey[300],
                                fontSize: 14.0 * titleTextSizeCoeff.value,
                              ),
                            ),
                          ],
                          crossAxisAlignment: CrossAxisAlignment.start,
                        ),
                      ],
                    ),
                  );
                },
              ),
              ValueListenableBuilder(
                valueListenable: appBarheightCoeff,
                builder: (context, v, c) {
                  return Positioned(
                    top: 20.0,
                    right: 18,
                    child: CircleAvatar(
                      radius: circleAvatarSize.value,
                      backgroundImage: AssetImage('assets/images/intro.jpg'),
                    ),
                  );
                },
              )
            ],
          ),
        );
      },
    );
  }
}