使用 flutter 在 linux 应用程序中滚动列表视图

Question

I am developing an app to run on a raspberry pi 4.

I have a simple ListView, I am compiling for linux with ' flutter build linux ' and to be able to scroll on a touch screen I have to move my finger on the scroll bar. If I scroll with the mouse wheel it works fine, but on a touch screen I necessarily have to do it on the scroll bar and not on the elements contained in the ListView.

However, if I build the app for use with flutter-pi, that is, build it as ' flutter build bundle ', move it to the pi and then run it as ' flutter-pi my_app ' then the listview scrolls on a touch screen. it works by hovering over items in the listview. For more details on how to compile for flutter-pi

And if I compile for the web, the scroll above the listview elements also works, it doesn't work when I compile for linux desktop app

My question is: Is there a way to scroll the listview by moving your finger over the elements in a native linux application and not through flutter-pi or web?

This is my code:

import 'package:flutter/material.dart';

Future<void> main() async {
   runApp(const MyApp2());
}
class MyApp2 extends StatelessWidget {
   const MyApp2({super.key});
  
  

   @override
   Widget build(BuildContext context) {
     var list2 = <Color>[];
     list2.add(Colors.black);
     list2.add(Colors.amber);
     list2.add(Color.fromARGB(255, 241, 150, 143));
     list2.add(Colors.blue);
     list2.add(Colors.pink);
     list2.add(Colors.blueAccent);
     return MaterialApp(
       title: 'ListView',
       home: Scaffold(
         body: ListView.builder(
               physics: const AlwaysScrollableScrollPhysics(),
               itemCount: list2.length,
               itemBuilder: (context, index) {
                 return Padding(
                   padding: const EdgeInsets.symmetric(vertical: 20),
                   child: Container(
                     color: list2[index],
                     height: 150,
                   ),
                 );
               }),
       ),
     );
   }
}

Answer 1

As @pskink says, you have to use MaterialScrollBehavior , I leave the modified code to serve as an example

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

Future<void> main() async {
  runApp(const MyApp2());
}


class MyApp2 extends StatelessWidget {
  const MyApp2({super.key});
  
  @override
  Widget build(BuildContext context) {
    var list2 = <Color>[];
    list2.add(Colors.black);
    list2.add(Colors.amber);
    list2.add(Color.fromARGB(255, 241, 150, 143));
    list2.add(Colors.blue);
    list2.add(Colors.pink);
    list2.add(Colors.blueAccent);
    return MaterialApp(
// THIS IS THE SCROLL BEHAVIOR
      scrollBehavior: const MaterialScrollBehavior().copyWith(dragDevices: {PointerDeviceKind.mouse, PointerDeviceKind.touch}),
      title: 'ListView',
      home: Scaffold(
        body: ListView.builder(
              physics: const AlwaysScrollableScrollPhysics(),
              itemCount: list2.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: Container(
                    color: list2[index],
                    height: 150,
                  ),
                );
              }),
      ),
    );
  }
}