Fixed RTL direction for the dismissible using fromStart attribute

[hassanannajjar]

Problem:

Before

Screen.Recording.2022-05-17.at.2.53.45.PM.mov

Solution:

I just added a new attribute called fromStart to change the dismissible direction

After

Screen.Recording.2022-05-17.at.3.46.10.PM.mov

[ibrahimdeeb0]

@letsar can you check this, plz

[letsar]

I'm not sure that how we should fix the issue. Can you send me a repro example I could just run to see what we can see?

[hassanannajjar]

I'm not sure that how we should fix the issue. Can you send me a repro example I could just run to see what we can see?

Hi, and sorry for the late response

The problem happen when you use Directionality textDirection: TextDirection.rtl as parent for Slidable,
Then ActionPane direction does not work from start to end and end to start

• you can try this

Directionality(
             textDirection: TextDirection.rtl,
             child: Slidable(
               // Specify a key if the Slidable is dismissible.
               key: const ValueKey(0),

               // The start action pane is the one at the left or the top side.
               startActionPane: ActionPane(
                 // A motion is a widget used to control how the pane animates.
                 motion: const ScrollMotion(),

                 // A pane can dismiss the Slidable.
                 dismissible: DismissiblePane(onDismissed: () {}),

                 // All actions are defined in the children parameter.
                 children: const [
                   // A SlidableAction can have an icon and/or a label.
                   SlidableAction(
                     onPressed: doNothing,
                     backgroundColor: Color(0xFFFE4A49),
                     foregroundColor: Colors.white,
                     icon: Icons.delete,
                     label: 'Delete',
                   ),
                   SlidableAction(
                     onPressed: doNothing,
                     backgroundColor: Color(0xFF21B7CA),
                     foregroundColor: Colors.white,
                     icon: Icons.share,
                     label: 'Share',
                   ),
                 ],
               ),

               // The end action pane is the one at the right or the bottom side.
               endActionPane: ActionPane(
                 motion: const ScrollMotion(),
                 dismissible: DismissiblePane(
                   onDismissed: () {},
                   confirmDismiss: () => Future.value(false),
                 ),
                 children: const [
                   SlidableAction(
                     // An action can be bigger than the others.
                     flex: 2,
                     onPressed: doNothing,
                     backgroundColor: Color(0xFF7BC043),
                     foregroundColor: Colors.white,
                     icon: Icons.archive,
                     label: 'Archive',
                   ),
                 ],
               ),

               // The child of the Slidable is what the user sees when the
               // component is not dragged.
               child: const ListTile(title: Text('Slide me')),
             ),
           ),

• or check the example in the same repo I changed

[saad-01]

Any update on this issue?

[saad-01]

@letsar how to solve this bug?

[tarek903]

@saad-01

Slidable(
useTextDirection: false,

[saad-01]

@tarek903 if I use this:
Slidable(
useTextDirection: false,

It will slide from right to left but I want it from left to right for Arabic languagae

[tarek903]

@saad-01you are right, but at least it fixed the issue of wrong drag gestures.
this needs to revamped and I don't think the owner really understand what RTL is. in terms of text and animations