Cursor pointing hover animation in Flutter web - flutter

Question

I have SVG as an image file where I want to do this cursor hover effect.
I tried onhoverbutton but that does not work here.
I am using flutter_svg package for showing SVG image
Container(
width: double.infinity,
height: 400,
child: SvgPicture.asset('assets/below.svg',
cacheColorFilter: true,
color: const Color(0xff2C66B8)),
)
This is what I want in my web-app

Answer 1

if you run below code in dartpad, you will get idea about how hover works in flutter.
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MouseRegion with custom cursor',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: MouseRegionWithCustomCursor(
cursor: const Icon(Icons.refresh, color: Colors.white),
// here you have to replace this with your svg image
child: Container(width: 300, height: 200, color: Colors.blueGrey),
),
);
}
}
// and in this class you can implement your blue line expansion and compression lines
class MouseRegionWithCustomCursor extends HookWidget {
final Widget cursor;
final Widget child;
const MouseRegionWithCustomCursor({
Key? key,
required this.cursor,
required this.child,
}) : super(key: key);
#override
Widget build(BuildContext context) {
final cursorPosition = useState<Offset?>(null);
return MouseRegion(
cursor: SystemMouseCursors.none,
onHover: (event) => cursorPosition.value = event.localPosition,
onExit: (event) => cursorPosition.value = null,
child: Stack(
children: [
child,
if (cursorPosition.value != null)
AnimatedPositioned(
duration: const Duration(),
left: cursorPosition.value?.dx,
top: cursorPosition.value?.dy,
child: cursor,
),
],
),
);
}
}
i know this is not best explanation but you can start with this.