web-dev-qa-db-ja.com

Flutter-Web：マウスホバー->カーソルをポインターに変更

Flutter内でカーソルの外観を変更するにはどうすればよいですか？ Listener（） ウィジェットを使用すると、マウスイベントをリッスンできることはわかっていますが、フラッターWebのホバーイベントに関する情報は見つかりませんでした。

誰かがまだ解決策を見つけましたか？

flutterflutter-web
10
Daniel Szy

これの回避策は次のとおりです。

  1. id（たとえばapp-containerをアプリのindex.htmlテンプレートのbody全体）。

これはあなたのindex.htmlがどのようになるかです：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My awesome app</title>
</head>
<body id="app-container">
  <script src="main.Dart.js" type="application/javascript"></script>
</body>
</html>
  1. 次に、ラッパーDartクラスを作成する必要があります。私はそれを呼び出しましたhand_cursor.Dart：
import 'package:flutter_web/gestures.Dart';
import 'package:flutter_web/widgets.Dart';
import 'package:universal_html/html.Dart' as html;
// see https://pub.dev/packages/universal_html

class HandCursor extends MouseRegion {

  // get a reference to the body element that we previously altered 
  static final appContainer = html.window.document.getElementById('app-container');

  HandCursor({Widget child}) : super(
    onHover: (PointerHoverEvent evt) {
      appContainer.style.cursor='pointer';
      // you can use any of these: 
      // 'help', 'wait', 'move', 'crosshair', 'text' or 'pointer'
      // more options/details here: http://www.javascripter.net/faq/stylesc.htm
    },
    onExit: (PointerExitEvent evt) {
      // set cursor's style 'default' to return it to the original state
      appContainer.style.cursor='default';
    },
    child: child
  );

}
  1. その後、ハンドカーソルを表示させたい場所に、このHandCursorラッパーで要素をラップする必要があります。以下のクラスawesome_button.Dartを参照してください。
import 'package:awesome_app/widgets/containers/hand_cursor.Dart';
import 'package:flutter_web/material.Dart';
import 'package:flutter_web/widgets.Dart';

class AwesomeButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        HandCursor(
          child: IconButton(
            onPressed: () {
              // do some magic
            },
            icon: Icon(Icons.star)
          ),
        )
      ],
    );
  }

}

簡単な説明は here にあります。

Flutterのmasterチャネルで作成された新しいWebプロジェクトで機能する、より用途の広いアップデートは、 here で見つけることができます。

お役に立てば幸いです。

11
Constantin Stan

以前のメソッドは非推奨です。これが更新されたコードです

import 'package:flutter/gestures.Dart';
import 'package:flutter/widgets.Dart';
import 'package:universal_html/prefer_sdk/html.Dart' as html;

class HandCursor extends MouseRegion {
  static final appContainer = html.window.document.getElementById('app-container');
  HandCursor({Widget child})
      : super(
          onHover: (PointerHoverEvent evt) {
            appContainer.style.cursor = 'pointer';
          },
          onExit: (PointerExitEvent evt) {
            appContainer.style.cursor = 'default';
          },
          child: child,
        );
}

そして、pubspec.yamlファイルで、universal_htmlをパッケージとして依存関係として追加します。バージョンは変更される場合があります。

dependencies:
  flutter:
    sdk: flutter
  universal_html: ^1.1.4

あなたはまだあなたのhtmlのボディに添付されたapp-containerのidを持ちたいです。これが私のhtmlファイルです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your App Title</title>
</head>
<body id="app-container">
  <script src="main.Dart.js" type="application/javascript"></script>
</body>
</html>

HandCursorウィジェットのコードを独自のファイルに配置します。あなたはそれをhand_cursor.Dartと呼ぶことができます。そして、手に表示させたいウィジェットでそれを使用するには、作業中のファイルにインポートして、必要なウィジェットをHandCursorウィジェットにラップします。

5
Khari Lane

マウスイベントはウェブでは機能しないと思います。リスナーウィジェットはGoogle I/O 2019でデモされ、マウスで動作しましたが、これはChromeOSアプリであり、ウェブアプリではありませんでした。

GitHub上のFlutterウェブ によると：

現時点では、デスクトップUIの操作は完全ではないため、flutter_webで構築されたUIは、デスクトップブラウザーで実行している場合でも、モバイルアプリのように感じる場合があります。

3
Charaf Eddine CHERAA

コンスタンタン・スタンによる適応回答

InkWellウィジェットと同様のクリック効果と境界線半径オプションを使用したい場合：

Pubspec.yamlファイルに追加します

dependencies:
  universal_html: ^1.1.4

次に、以下のタグ<body id="app-container">に続いて、index.htmlファイルに追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your App Title</title>
</head>
<body id="app-container">
  <script src="main.Dart.js" type="application/javascript"></script>
</body>
</html>

最後に、次のウィジェットを作成し、カプセル化された必要なすべてのウィジェットを使用します。

import 'package:flutter/foundation.Dart';
import 'package:flutter/gestures.Dart';
import 'package:flutter/material.Dart';
import 'package:universal_html/prefer_sdk/html.Dart' as html;

class InkWellMouseRegion extends InkWell {
  InkWellMouseRegion({
    Key key,
    @required Widget child,
    @required GestureTapCallback onTap,
    double borderRadius = 0,
  }) : super(
          key: key,
          child: !kIsWeb ? child : HoverAware(child: child),
          onTap: onTap,
          borderRadius: BorderRadius.circular(borderRadius),
        );
}

class HoverAware extends MouseRegion {

  // get a reference to the body element that we previously altered 
  static final appContainer = html.window.document.getElementById('app-container');

  HoverAware({Widget child}) : super(
    onHover: (PointerHoverEvent evt) {
      appContainer.style.cursor='pointer';
      // you can use any of these: 
      // 'help', 'wait', 'move', 'crosshair', 'text' or 'pointer'
      // more options/details here: http://www.javascripter.net/faq/stylesc.htm
    },
    onExit: (PointerExitEvent evt) {
      // set cursor's style 'default' to return it to the original state
      appContainer.style.cursor='default';
    },
    child: child
  );

}
1
Edeson Bizerril
final appContainer 
     = html.document.getElementsByTagName('body')[0] as html.Element;

            GestureDetector(
                        child: MouseRegion(
                          child: Text(
                            'https://github.com/yumi0629',
                            style: textStyle,
                          ),
                          onHover: (_) => appContainer.style.cursor = 'pointer',
                          onExit: (_) => appContainer.style.cursor = 'default',
                        ),
                        onTap: () {
                          print('open');
                          js.context.callMethod(
                              'open', ['https://github.com/yumi0629']);
                        },
                      )
0
yumi0629