広告

Flutterラボの

プレミアム会員になる

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

2021.12.07

モバイル開発ではドラッグでスクロールできますが、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に関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)