Flutter Scrolling Issue Assistance Needed

Question

I have a pretty complicated question (You can find a reference in the dashboard section of MyFitnessPal). I have this image:

If you look at the top left, you see a big yellow half ball type thing. Keep this in mind for the future.

My Question

EDIT: The footer should not move when the user is scrolling

I want this page to be

1. Scrollable
2. When the page is scrolling, I want the yellow circle to gradually get smaller and go away (slide to the top left corner). In addition, I want the JustLift (and the description), to slide up and away as soon as the user scrolls past a certain point. Finally, I want the Go premium button to slide up and to the left, so the profile image and the go premium button are next to each other. It should look something like this:

PROFILE ____ Go Premium Btn _______________

ALL THE CARDS AT THE BOTTOM

Terrible description but a brief idea of what I want If you would like a reference to see what I mean, you can go to the MyFitnessPal app and scroll down from the home page

Answer 1

you can use a CustomScrollView together with a SliverAppBar, I made an example code below

Widget build(BuildContext context) {
return Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverAppBar(
        backgroundColor: const Color(0xff3b3838),
        centerTitle: false,
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(0),
          child: SizedBox(
            width: 200,
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  shape: const StadiumBorder(),
                  backgroundColor: const Color(0xffffff00)),
              child: const Text(
                'Go Premium!',
                style: TextStyle(
                    color: Colors.black, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
        pinned: true,
        expandedHeight: 130,
        titleSpacing: 20,
        flexibleSpace: FlexibleSpaceBar(
          collapseMode: CollapseMode.pin,
          background: Stack(
            children: [
              Positioned(
                top: -34,
                left: -40,
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(400),
                    child: Container(
                        width: 150,
                        height: 150,
                        color: const Color(0xffffff00))),
              ),
              Positioned(
                left: 70,
                top: 50,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Text(
                      'JustLift',
                      style: TextStyle(
                          fontSize: 50,
                          fontWeight: FontWeight.bold,
                          color: Colors.white),
                    ),
                    Text(
                      'Without pain there is no gain',
                      style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                          color: Color(0xff9f9b9b)),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      SliverToBoxAdapter(
        child: Column(
            children: List.generate(200, (index) {
          return Center(
            child: Text(
              'Item $index',
            ),
          );
        })),
      )
    ],
  ),
);

}