CarouselView is not scrollable with mouse #154618

Activity

1. flutter

   deleted a comment from on Sep 4, 2024
2. danagbemava-nc

   added

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Sep 4, 2024
3. danagbemava-nc commented on Sep 4, 2024

   

   danagbemava-nc

   on Sep 4, 2024

   Member

   More actions

   Hi @PhilipSA, to support drag scrolling you need to implement a custom scroll behavior. See https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag

   Can you try the sample below to see if it solves your issue?

   code sample

   import 'package:flutter/material.dart';
   import 'package:flutter/gestures.dart';
   
   /// Flutter code sample for [Carousel].
   
   class MyCustomScrollBehavior extends MaterialScrollBehavior {
     // Override behavior methods and getters like dragDevices
     @override
     Set<PointerDeviceKind> get dragDevices => {
           PointerDeviceKind.touch,
           PointerDeviceKind.mouse,
           // etc.
         };
   }
   
   // Set ScrollBehavior for an entire application.
   
   void main() => runApp(const CarouselExampleApp());
   
   class CarouselExampleApp extends StatelessWidget {
     const CarouselExampleApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         scrollBehavior: MyCustomScrollBehavior(),
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Carousel Sample'),
           ),
           body: const CarouselExample(),
         ),
       );
     }
   }
   
   class CarouselExample extends StatefulWidget {
     const CarouselExample({super.key});
   
     @override
     State<CarouselExample> createState() => _CarouselExampleState();
   }
   
   class _CarouselExampleState extends State<CarouselExample> {
     @override
     Widget build(BuildContext context) {
       return Center(
         child: ConstrainedBox(
           constraints: const BoxConstraints(maxHeight: 200),
           child: CarouselView(
             itemExtent: 330,
             shrinkExtent: 200,
             children: List<Widget>.generate(20, (int index) {
               return UncontainedLayoutCard(index: index, label: 'Item $index');
             }),
           ),
         ),
       );
     }
   }
   
   class UncontainedLayoutCard extends StatelessWidget {
     const UncontainedLayoutCard({
       super.key,
       required this.index,
       required this.label,
     });
   
     final int index;
     final String label;
   
     @override
     Widget build(BuildContext context) {
       return ColoredBox(
         color: Colors.primaries[index % Colors.primaries.length].withOpacity(0.5),
         child: Center(
           child: Text(
             label,
             style: const TextStyle(color: Colors.white, fontSize: 20),
             overflow: TextOverflow.clip,
             softWrap: false,
           ),
         ),
       );
     }
   }
4. danagbemava-nc

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Sep 4, 2024
5. PhilipSA commented on Sep 4, 2024

   

   PhilipSA

   on Sep 4, 2024

   Author

   More actions

   Hi @PhilipSA, to support drag scrolling you need to implement a custom scroll behavior. See https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag

   Can you try the sample below to see if it solves your issue?
   code sample

   import 'package:flutter/material.dart';
   import 'package:flutter/gestures.dart';
   
   /// Flutter code sample for [Carousel].
   
   class MyCustomScrollBehavior extends MaterialScrollBehavior {
     // Override behavior methods and getters like dragDevices
     @override
     Set<PointerDeviceKind> get dragDevices => {
           PointerDeviceKind.touch,
           PointerDeviceKind.mouse,
           // etc.
         };
   }
   
   // Set ScrollBehavior for an entire application.
   
   void main() => runApp(const CarouselExampleApp());
   
   class CarouselExampleApp extends StatelessWidget {
     const CarouselExampleApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         scrollBehavior: MyCustomScrollBehavior(),
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Carousel Sample'),
           ),
           body: const CarouselExample(),
         ),
       );
     }
   }
   
   class CarouselExample extends StatefulWidget {
     const CarouselExample({super.key});
   
     @override
     State<CarouselExample> createState() => _CarouselExampleState();
   }
   
   class _CarouselExampleState extends State<CarouselExample> {
     @override
     Widget build(BuildContext context) {
       return Center(
         child: ConstrainedBox(
           constraints: const BoxConstraints(maxHeight: 200),
           child: CarouselView(
             itemExtent: 330,
             shrinkExtent: 200,
             children: List<Widget>.generate(20, (int index) {
               return UncontainedLayoutCard(index: index, label: 'Item $index');
             }),
           ),
         ),
       );
     }
   }
   
   class UncontainedLayoutCard extends StatelessWidget {
     const UncontainedLayoutCard({
       super.key,
       required this.index,
       required this.label,
     });
   
     final int index;
     final String label;
   
     @override
     Widget build(BuildContext context) {
       return ColoredBox(
         color: Colors.primaries[index % Colors.primaries.length].withOpacity(0.5),
         child: Center(
           child: Text(
             label,
             style: const TextStyle(color: Colors.white, fontSize: 20),
             overflow: TextOverflow.clip,
             softWrap: false,
           ),
         ),
       );
     }
   }

   Yes this solved the problem thanks; i was totally unaware of this behavior.
6. github-actions

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Sep 4, 2024
7. danagbemava-nc commented on Sep 5, 2024

   

   danagbemava-nc

   on Sep 5, 2024

   Member

   More actions

   Closing this as solved
8. danagbemava-nc

   closed this as completedon Sep 5, 2024
9. danagbemava-nc

   added

   r: solvedIssue is closed as solvedIssue is closed as solved

   and removed

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Sep 5, 2024
10. github-actions commented on Sep 19, 2024

    

    github-actionsbot

    on Sep 19, 2024 – with GitHub Actions

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
11. github-actions

    locked as resolved and limited conversation to collaborators on Sep 19, 2024