CATCHV Blog

[flutter] mouse point drag scroll 본문

Dev/flutter

[flutter] mouse point drag scroll

catchv 2022. 12. 21. 10:10
반응형

flutter 에서 web, windows, mac, linux(이건 테스트 못해 봄)에서는 제스쳐를 마우스로 하게 됩니다.

그런데 마우스로는 drag 시에 핸드폰에서 기대하던 터치 동작이 작동하지 않습니다. 

mouse drag시에 적용이 되지 않음.

터치와 같은 형태로 만들기 위해서는 scrollBehavior 값을 조정하여 스크롤의 동작 방식을 변경 할 수 있습니다.

 

MaterialScrollBehavior 를 상속 받아 dragDevices 를 변경합니다.

// mouse_drag_scroll_behavior.dart
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

 

MaterialApp의 scrollBehavior: MouseDragScrollBehavior() 로 설정하여 스크롤 디바이스를 변경합니다.

MaterialApp(
      title: 'Flutter Demo',
      scrollBehavior: MouseDragScrollBehavior(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );

 

mouse drag시에 scroll 적용

 

반응형
Comments