Changing the design of a widget after scrolling in sliver app bar

Question

I want to design this ui bellow in flutter the problem is the categories list as you can see it changes on scroll the items design change from vertical to horizontal, here my code down bellow, I m wondering how can I do that on flutter Click here to see the design I m talking about, you can notice that under the search bar the list design changes, I want to do that

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          physics: BouncingScrollPhysics(),
          slivers: [
            SliverAppBar(
              expandedHeight: 104,
              floating: true,
              pinned: true,
              snap: false,
              titleSpacing: 0,
              backgroundColor: Theme.of(context).scaffoldBackgroundColor,
              title: Padding(
                padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 4),
                child: Text(
                  "My List",
                  style: TextStyle(color: Gray500, fontSize: 26),
                ),
              ),
              bottom: AppBar(
                elevation: 0,
                titleSpacing: 0,
                backgroundColor: Theme.of(context).scaffoldBackgroundColor,
                title: Padding(
                  padding:
                      const EdgeInsets.only(left: 16.0, right: 16.0, top: 4),
                  child: Container(
                    height: 48,
                    child: Row(
                      children: [
                        Expanded(
                          child: Container(
                            height: 48,
                            width: 200,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Gray100,
                            ),
                            child: Row(
                              children: [
                                SizedBox(
                                  width: 10,
                                ),
                                Icon(
                                  Icons.search,
                                  color: Gray300,
                                ),
                                SizedBox(
                                  width: 10,
                                ),
                                Text(
                                  "Search",
                                  style: TextStyle(
                                    color: Gray300,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(
                          width: 16,
                        ),
                        Container(
                          height: 48,
                          width: 48,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.black),
                          child: Icon(Icons.date_range),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Column(
                children: [
                  //the list of the menu
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}