I am trying to make a navigation that scrolls automatically when the mouse cursor moves up or down on it.

When I move the cursor up on the navigation section or the SingleChildScrollView, it should go up and similarly when I move the cursor down, it should go down if you guys get what I mean. Sorry my English isn't very good and I am not particularly good at explaining stuff.

Hope you guys can help me out here.

This is my main.dart file:

import 'package:flutter/material.dart';
import 'package:my_portfolio/pages/homepage.dart';

void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  home: HomePage(),
));

This is my homepage.dart file

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_portfolio/widgets/nav_llink.dart';

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF2C2A2A),
      body: Container(
        padding: EdgeInsets.only(left: 120.0, right: 120.0),
        child: Row(
          children: [
            Spacer(),
            SingleChildScrollView(
              child: Column(
                children: [
                  NavLink(
                    title: "ABOUT",
                    onTap: () {},
                  ),
                  NavLink(
                    title: "-",
                    onTap: () {},
                  ),
                  NavLink(
                    title: "PROJECTS",
                    onTap: () {},
                  ),
                  NavLink(
                    title: "-",
                    onTap: () {},
                  ),
                  NavLink(
                    title: "CONTACT",
                    onTap: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

and finally this are the link "button"

import 'package:flutter/material.dart';
import 'package:flutter/src/gestures/events.dart';

class NavLink extends StatefulWidget {
  final String title;
  final Function onTap;

  Color color = Color(0xFF707070);
  int position;

  NavLink({ @required this.title, @required this.onTap });

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

class _NavLinkState extends State<NavLink> {
  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: 1,
      child: Padding(
        padding: EdgeInsets.only(right: 80.0, left: 80.0),
        child: GestureDetector(
          onTap: widget.onTap,
          child: MouseRegion(
            onHover: updateColor,
            onExit: resetColor,
            child: Text(
              widget.title,
              style: TextStyle(
                color: widget.color,
                fontSize: 180.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }

  void updateColor(PointerHoverEvent event) {
    setState(() {
      widget.color = Colors.white;
      widget.position = event.position.dx as int;
    });
  }

  void resetColor(PointerExitEvent event) {
    setState(() {
      widget.color = Color(0xFF707070);
    });
  }

}