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.

Change Hover Mouse Cursor on Any Widget:

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
  )
)

Full Dart Code Example:

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")
                     )
                ],
            )
          )
       );
  }
}

Output Screenshot:

In this way, you can change the hover mouse cursor of any widget in Flutter Web and Apps.

No any Comments on this Article


Please Wait...