Stretching overscroll with RTl Stretches in incorrect direction #113185

Activity

1. exaby73

   added

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

   on Oct 10, 2022
2. exaby73 commented on Oct 10, 2022

   

   exaby73

   on Oct 10, 2022

   Member

   More actions

   Triage report

   I can reproduce this issue. I have removed the deprecated use of androidOverscrollIndicator from ThemeData and instead used useMaterial3, but the issue still persists.

   Adding a custom ScrollBehavior with the axisDirection set to AxisDirection.right fixes the issue.

   Code Sample updated for the fix

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         theme: ThemeData.dark().copyWith(),
         debugShowCheckedModeBanner: false,
         home: const Directionality(
           textDirection: TextDirection.rtl,
           // textDirection: TextDirection.ltr,
           child: Scaffold(
             body: SafeArea(
               child: Center(
                 child: MyWidget(),
               ),
             ),
           ),
         ),
       );
     }
   }
   
   class MyWidget extends StatelessWidget {
     const MyWidget({super.key});
   
     @override
     Widget build(BuildContext context) {
       return SizedBox(
         height: 100,
         child: ScrollConfiguration(
           behavior: MyBehaviour(),
           child: ListView.builder(
             itemBuilder: (context, index) => Container(
               width: 50,
               height: 100,
               color: Colors.amber[(index % 9 + 1) * 100],
               child: Center(child: Text('Entry $index')),
             ),
             itemCount: 10,
             padding: const EdgeInsets.all(8),
             scrollDirection: Axis.horizontal,
           ),
         ),
       );
     }
   }
   
   class MyBehaviour extends ScrollBehavior {
     @override
     Widget buildOverscrollIndicator(
         BuildContext context, Widget child, ScrollableDetails details) {
       return StretchingOverscrollIndicator(
         axisDirection: AxisDirection.right,
         child: child,
       );
     }
   }
3. exaby73

   added

   frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

   p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

   f: scrollingViewports, list views, slivers, etc.Viewports, list views, slivers, etc.

   has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work on

   found in release: 3.3Found to occur in 3.3Found to occur in 3.3

   found in release: 3.4Found to occur in 3.4Found to occur in 3.4

   and removed

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

   on Oct 10, 2022
4. youssefali424 commented on Oct 10, 2022

   

   youssefali424

   on Oct 10, 2022

   ContributorAuthor

   More actions

   @exaby73 after further investigation now i know where is the issue here

   Code sample

   AlignmentDirectional _getAlignmentForAxisDirection(double overscroll) {
       // Accounts for reversed scrollables by checking the AxisDirection
       switch (widget.axisDirection) {
         case AxisDirection.up:
           return overscroll > 0
               ? AlignmentDirectional.topCenter
               : AlignmentDirectional.bottomCenter;
         case AxisDirection.right:
           return overscroll > 0
               ? AlignmentDirectional.centerEnd
               : AlignmentDirectional.centerStart;
         case AxisDirection.down:
           return overscroll > 0
               ? AlignmentDirectional.bottomCenter
               : AlignmentDirectional.topCenter;
         case AxisDirection.left:
           return overscroll > 0
               ? AlignmentDirectional.centerStart
               : AlignmentDirectional.centerEnd;
       }
     }

   AlignmentDirectional is used but it is reversed with AxisDirection.left

   Fix

   AlignmentDirectional _getAlignmentForAxisDirection(double overscroll) {
       // Accounts for reversed scrollables by checking the AxisDirection
       switch (widget.axisDirection) {
         case AxisDirection.up:
           return overscroll > 0
               ? AlignmentDirectional.topCenter
               : AlignmentDirectional.bottomCenter;
         case AxisDirection.left:
         case AxisDirection.right:
           return overscroll > 0
               ? AlignmentDirectional.centerEnd
               : AlignmentDirectional.centerStart;
         case AxisDirection.down:
           return overscroll > 0
               ? AlignmentDirectional.bottomCenter
               : AlignmentDirectional.topCenter;
       }
     }
5. youssefali424 commented on Oct 10, 2022

   

   youssefali424

   on Oct 10, 2022

   ContributorAuthor

   More actions

   fix in #113214
6. Piinks

   added

   P2Important issues not at the top of the work listImportant issues not at the top of the work list

   on Oct 20, 2022
7. Piinks commented on Dec 22, 2022

   

   Piinks

   on Dec 22, 2022

   Contributor

   More actions

   As stated above, this issue was fixed! 🎉
8. Piinks

   closed this as completedon Dec 22, 2022
9. exaby73

   added

   r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version

   on Dec 23, 2022
10. github-actions commented on Mar 4, 2023

    

    github-actionsbot

    on Mar 4, 2023

    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 Mar 4, 2023