“This is the 28th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

We are using Flutter Web to develop PC accessible websites, so there will be some mouse handling.

hover

Clickable widgets, such as buttons. If you hover over this part, a shadow will appear, and a shadow will appear when you press and release it. This is interactive, but sometimes ugly.

We can solve this problem by setting the relevant properties.

MaterialButton

The MaterialButton and its subclasses (FlatButton, etc.) can remove these effects by setting a custom color for properties such as hoverColor, or by setting a transparent color, as follows:

MaterialButton( onPressed: () { ... }, hoverColor: Colors.transparent, focusColor: Colors.transparent, splashColor: Colors.transparent, child: ... ,...). ;Copy the code

HoverColor is the bottom color shown when hovering, focusColor is when focus is taken (down), and splashColor is when release (up) occurs.

Of course, a Button has many more properties that you can use to make it look pretty.

TextButton

If FlatButton is used in Flutter2.0, it will indicate that it is not recommended, instead TextButton is added in 2.0. It is not a subclass of MaterialButton, so it does not have properties such as hoverColor. By setting its style as follows:

TextButton( onPressed: () { ... }, style: ButtonStyle( overlayColor: MaterialStateProperty.all(Colors.transparent), ), ... child: ... ,...). ;Copy the code

Set the overlayColor property of ButtonStyle, which is the shadow effect.

Global configuration

Basically, the visual will not accept the default shadow effect of any button, so if it is troublesome to set each button, we can set the theme globally, by configuring the theme in the app, as follows:

MaterialApp( title: title, theme: ThemeData( ... buttonTheme: ButtonThemeData( focusColor: Colors.transparent, hoverColor: Colors.transparent, splashColor: Colors.transparent, ), textButtonTheme: TextButtonThemeData( style: ButtonStyle( overlayColor: MaterialStateProperty.all(Colors.transparent), ) ), ... ) ,...).Copy the code

Note buttonTheme and textButtonTheme. One is responsible for MaterialButton and its subclasses, and the other is responsible for TextButton and its subclasses. If both types of buttons are used in your app, then you need to configure both.

Region show hide

There will be a requirement for the PC to show up when the mouse moves over an area and hide when it moves out. For example, the operation bar at the bottom of the player is usually hidden and does not affect viewing. When the mouse moves to the bottom, it is displayed.

This requirement can be implemented through MouseRegion, which is similar to the GestureDetector. The GestureDetector can only handle gesture-related tasks, such as clicking, dragging, etc., while MouseRegion handles mouse related tasks, including entering onEnter, Exit onExit and hover onHover. The implementation code is as follows:

MouseRegion(
  onEnter: (event){
    setState(() {
      _hide = false;
    });
  },
  onExit: (event){
    setState(() {
      _hide = true;
    });
  },
  child: _hide ? _buildDefault() : _buildBar()
);
Copy the code

_hide is a class variable. _buildBar is what to display, and _buildDefault is a blank area to check for mouse Enter events, such as:

  Widget _buildDefault(){
    return Container(
      width: double.infinity,
      height: 40,); }Copy the code

A 40-high, screen-width transparent area that displays _buildBar content when the mouse enters the area, and redisplays the transparent area if it moves out. This fulfils the above requirements.