[Flutter] 플러터 웹에서 scroll 안될 때 해결방법

[Flutter] 플러터 웹에서 scroll 안될 때 해결방법

---

플러터에서 스크롤 기능을 처리하기 위해 일반적으로 SingleChildScrollView를 사용하곤 한다.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('예약 조회 페이지'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: DataTable(
            ...

속성으로 Axis.vertical을 넣으면 수직으로, Axis.horizontal을 넣으면 수평 방향으로 스크롤이 가능하다.

 

그러나 이는 모바일 환경에서만 가능할 뿐, 크롬과 같은 웹 환경으로 빌드를 하는 경우에는 적용되지 않았다.

 

위와 같이 컬럼이 오른쪽으로 더 있는데도 불구하고 가로 방향으로 스크롤을 하거나 드래그로 화면을 이동하는 것이 불가능 했다.

 

 

해결 방법

main.dart에서 아래와 같은 코드를 추가한다.

마우스로 드래그를 하면 스크롤을 한 것과 같은 효과를 부여할 수 있었다.

import 'dart:ui'; // import 추가

...


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MaterialScrollBehavior().copyWith(
        dragDevices: {PointerDeviceKind.mouse, PointerDeviceKind.touch, PointerDeviceKind.stylus, PointerDeviceKind.unknown},
      ),
      
      ...

 

참고 자료

https://stackoverflow.com/questions/69232764/flutter-web-cannot-scroll-with-mouse-down-drag-flutter-2-5

Flutter Web: Cannot scroll with mouse down (drag) (Flutter 2.5+)