How to Change Mouse Hover Cursor in Flutter Web

In this example, we are going to show you the easiest way to change hove mouse cursor of widget in Flutter web. You may need to show different cursors according to the purpose of widget in Flutter web. See the example below to change mouse cursor of widget on hover in Flutter Web and App.

MouseRegion(
  cursor: SystemMouseCursors.zoomIn, // zoom in cursor
      // SystemMouseCursors.forbidden - forbidden cursor,
        //SystemMouseCursors.click, - hand cursor
        //you can use more.
  child:Card( 
    //more contents goes here
  )
)

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Mouse Cursor"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Column(children: [
                     MouseRegion(
                      cursor: SystemMouseCursors.click, //hand click cursor
                          // SystemMouseCursors.zoomIn -  zoom in cursor
                          // SystemMouseCursors.forbidden - forbidden cursor,
                           //you can use more.
                      child:Card( 
                        child: Container(
                          width:double.infinity,
                          padding: EdgeInsets.all(20),
                          child: Text("Change Mouse Cursor."),
                        ),
                      )
                     ),

                     ElevatedButton(onPressed: (){},
                       child: Text("Click Here")
                     )
                ],
            )
          )
       );
  }
}