WhatsApp floating header in flutter

.dart

import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView>
    with SingleTickerProviderStateMixin {
  final controller = ScrollController();
  late final AnimationController animationController;
  late final Animation<Offset> animation;

  @override
  void initState() {
    animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1000));
    animation = Tween<Offset>(
            begin: const Offset(0.0, 0.0), end: const Offset(0.0, -5.0))
        .animate(animationController);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Todo'),
      ),
      body: SafeArea(
          child: Column(
        children: [
          Expanded(
              child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              Positioned(
                top: 8,
                width: 100,
                child: SlideTransition(
                  position: animation,
                  child: Container(
                    decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(15)),
                    alignment: Alignment.center,
                    height: 30,
                    child: Text(
                      "Mar 2, 2020",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              NotificationListener<ScrollNotification>(
                onNotification: (scrollNotification) {
                  setState(() {
                    if (scrollNotification is ScrollStartNotification) {
                      animationController.forward();
                    } else if (scrollNotification is ScrollUpdateNotification) {
                      animationController.forward();
                    } else if (scrollNotification is ScrollEndNotification) {
                      animationController.reverse();
                    }
                  });
                  return true;
                },
                child: ListView.builder(
                    controller: controller,
                    itemBuilder: (ctx, i) {
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Padding(
                            padding: EdgeInsets.only(left: 16),
                            child: Text(
                              'Mar 2, 2020',
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                          ),
                          const ListTile(
                            title: Text('One'),
                            trailing: Icon(Icons.more_vert),
                          )
                        ],
                      );
                    }),
              ),
            ],
          )),
        ],
      )),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
              context,
              PageTransition(
                  duration: const Duration(milliseconds: 600),
                  type: PageTransitionType.rightToLeft,
                  child: const AddTodoView()));
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}