LoginSignup
4
3

More than 1 year has passed since last update.

[Flutter] Desktop / Web アプリでマウスドラッグ操作によるスクロールを有効にする方法

Last updated at Posted at 2021-08-22

はじめに

バージョンflutter-2.3.0-12.0.pre以降で、Desktop及びWebアプリにおいてマウスのドラッグ操作でスクロースすることが出来なくなりました。デスクトップ環境でアプリをデバッグしているときにあれ?って思うことがあるので(例えば、横方向へのスクロール操作)、元のようにドラッグ操作でスクロールを使えるようにする方法をまとめておきます。

※ 2021/8/22時点で stable 版にはまだリリースされていない機能ですが、そのうち反映されます。


@kabochapo ツイートありがとう(このツイートをなんとなく覚えていた)

アプリ全体でマウスドラッグ操作を有効にする方法

MaterialAppscrollBehaviorMaterialScrollBehaviorを継承した独自のインスタンスを渡してあげます。dragDevicesメソッドで返す値にPointerDeviceKind.mouseを追加してあげれば良いです。

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => { 
    PointerDeviceKind.touch, // 通常のタッチ入力デバイス
    PointerDeviceKind.mouse, // これを追加!
  };
}

MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(), // これを追加!
  // ...
);

特定のwidgetでのみマウスドラッグ操作を有効にする方法

目的のwidgetをScrollConfigurationで囲ってあげて、behaviorに上記と同じようにMaterialScrollBehaviorを継承した独自クラスのインスタンスを与えるだけです。

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => { 
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

final ScrollController controller = ScrollController();
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
     return Text('Item $index');
    }
  ),
);

参考文献

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3