AppBar Overlaps with Grid using Scroll Controller and Stack

appbaroverlap.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

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: const Home(),
    );
  }
}


class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State<Home> {
  late ScrollController scrollController;
  double headerHeight = 200.0;

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
    scrollController.addListener(() {
      setState(() {});
    });
  }

  double get _headerOffset {
    if (scrollController.hasClients) {
      if (scrollController.offset > headerHeight) {
        final val = -1 * (headerHeight + 50.0);
        return val;
      } else {
        final val = -1 * (scrollController.offset * 1.5 * 5);
        return val;
      }
    }

    return 0.0;
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.removeListener(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        title: const Text("Notes"),
        backgroundColor: Colors.pink,
      ),
      drawer: const Drawer(),
      body: Stack(
        alignment: AlignmentDirectional.topCenter,
        children: [
          AnimatedPositioned(
            duration: const Duration(milliseconds: 100),
            top: _headerOffset,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 100),
              curve: Curves.easeInOut,
              height: headerHeight,
              width: MediaQuery.of(context).size.width,
              color: Colors.pink,
            ),
          ),
          AnimatedPositioned(
            duration: const Duration(milliseconds: 100),
            top: _headerOffset + (_headerOffset < -100 ? 210 : 150),
            left: 0,
            right: 0,
            bottom: 0,
            child: Padding(
                padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                child: GridView.builder(
                  controller: scrollController,
                  physics: const ClampingScrollPhysics(),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 16,
                      mainAxisSpacing: 16),
                  itemBuilder: (context, index) {
                    return const Card(color: Colors.white);
                  },
                )),
          )
        ],
      ),
    );
  }
}