Flutter 2.5+版本Web端无法鼠标拖拽滚动，如何开启该功能？

问题原因 #

Flutter 2.5及以上版本对各平台默认滚动行为做了对齐原生系统的调整：桌面端（含Web桌面场景）原生应用普遍默认不支持鼠标拖拽滚动，因此官方默认将鼠标设备从滚动组件的拖拽支持列表中移除，并非功能被删除，仅修改了默认配置，2.2.3及更早版本默认包含鼠标拖拽支持，所以可以正常使用。

解决方案 #

方案1：全局开启鼠标拖拽滚动 #

在MaterialApp初始化时自定义全局滚动行为，将鼠标设备加入拖拽支持列表，修改后项目内所有滚动组件默认都支持鼠标拖拽：

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

// 自定义滚动行为
class CustomScrollBehavior extends MaterialScrollBehavior {
  // 重写拖拽支持的设备类型，加入鼠标
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    // 按需加入其他设备类型，比如stylus手写笔
  };
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 应用自定义滚动行为
      scrollBehavior: CustomScrollBehavior(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SingleChildScrollView(
        child: Column(
          children: List<Widget>.generate(50, (i) => Text(i.toString())).toList(),
        ),
      ),
    );
  }
}

方案2：单个滚动组件单独开启 #

如果不需要全局修改，仅要给指定滚动组件开启鼠标拖拽，用ScrollConfiguration包裹对应滚动组件即可：

ScrollConfiguration(
  behavior: CustomScrollBehavior(),
  child: SingleChildScrollView(
    // 原有内容不变
  ),
)

内容的提问来源于stack exchange，提问作者Josh Chiu