flutter web 가로스크롤

 

Default drag scrolling devices

 

flutter WEB은 세로 스크롤은 되는데 가로스크롤이 안된다.

이전에는 됐는데, 어느 시점부터 안되었다고 하더라

 

공식 문서에서는 해당 기능을 사용하면 가로 스크롤이 가능하다고 말하지만,

내가 원하는 방법(shift + 마우스 스크롤)이 아니라 아쉽다.

 

아쉽게도 지금은 마우스 클릭을 통해 스크롤을 해야한다.

 

공식 문서에 나온 코든는 다음과 같다.

 

class Login extends StatefulWidget {
  const Login({super.key});

  @override
  State<Login> createState() => _LoginState();
}



class _LoginState extends State<Login> {
  String test1 = 'zxcv';

  void OnClick(){
    setState(() {
      test1 = 'asdf';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: ScrollConfiguration(
        behavior: CustomScroll(),
      child: Container( // 공식문서 코드
        height: 200.0, // Adjust the height as needed
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 50,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              width: 100.0, // Adjust the width as needed
              margin: EdgeInsets.all(8.0),
              color: Colors.blue,
              child: Center(
                child: Text('Item $index'),
              ),
            );
          },
        ),
      ),)
    );

  }
 }


  void ShowToast(){
    Fluttertoast.showToast(
      msg: '테스트',
      toastLength: Toast.LENGTH_SHORT
    );
  }

 

해당 코드는 customScroll만 따로 뺀것이다.

dart파일을 새로 만들어 작성하면 된다.

class CustomScroll extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    // etc.
  };
}

실제 실행을 한다면 50개의 리스트를 볼수 있는데, 마우스 좌클릭으로 스크롤 할 수 있다.

조금 아쉽다.

 

다른 괜찮은 스크롤을 찾아내면 추가 할 예정이다.