【Flutter WEB】ListViewをドラッグでスクロールできるようにする

モバイル開発ではドラッグでスクロールできますが、WEB開発のデフォルトではドラッグでスクロールすることはできません。

behaiorの設定を行うことでこの問題を解決することができます。

新しくCustomScrollBehaviorクラスを作成しておきます。

import 'dart:ui';

import 'package:flutter/material.dart';

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

ドラッグでスクロールしたいWidgetをScrollConfigurationで囲い、behaviorプロパティにCustomScrollBehaviorを指定します。

child: ScrollConfiguration(
  behavior: CustomScrollBehavior(),
  child: ListView(...

Flutterラボ - 「Flutterラボ」では動画でFlutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで誰でも気軽にFlutterが学べるコンテンツを公開しています。