Flutter – ScrollView is under the appBar

I need to have a gradient behind my appBar so my scaffold has the extendBodyBehindAppBar set to true:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFEEEEEE),
      drawer: const Drawer(),
      extendBodyBehindAppBar: true,
      appBar: CustomAppBar(
        title: 'Wine Shop',
        appContext: context,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 380,
              child: Stack(
                alignment: Alignment.topLeft,
                children: [
                  Container(
                    width: double.infinity,
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          Color(0xFFF9C14C),
                          Color(0xFFF5A328),
                        ],
                      ),
                    ),
                    child: SafeArea(
                      child: _searchInput(),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: SizedBox(
                      height: 160,
                      width: double.infinity,
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemBuilder: (c, i) {
                          return _slideCard();
                        },
                        itemCount: 5,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            _buildPopularSection(context),
            _buildRecommendedSection(context),
          ],
        ),
      ),
    );
  }

the problem is that when I scroll the view the content is placed above the appBar:

This is my AppBar widget:

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
  final String title;
  final BuildContext appContext;
  const CustomAppBar({
    super.key,
    required this.title,
    required this.appContext,
  });

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0.0,
      title: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 26.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      actions: [
        AppBarIcon(
          icon: Icons.shopping_cart,
          onPressed: () {},
        ),
      ],
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(56.0);
}

If I remove extendBodyBehindAppBar the content goes under the appBar, what am I missing?