### Basic Slidable List Item Example

Source: https://github.com/letsar/flutter_slidable/blob/master/README.md

This example demonstrates how to create a basic slidable list item with start and end action panes. It includes dismissible functionality and predefined actions like delete, share, archive, and save.

```dart
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: const ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        // An action can be bigger than the others.
        flex: 2,
        onPressed: doNothing,
        backgroundColor: Color(0xFF7BC043),
        foregroundColor: Colors.white,
        icon: Icons.archive,
        label: 'Archive',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF0392CF),
        foregroundColor: Colors.white,
        icon: Icons.save,
        label: 'Save',
      ),
    ],
  ),

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

--------------------------------

### Implement Slidable List Item with Actions in Flutter

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Demonstrates how to use the Slidable widget to create a list item with start and end action panes. This example shows archive and delete actions for an email list item. It requires the flutter_slidable package and uses Material Design widgets.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class EmailListItem extends StatelessWidget {
  final String subject;
  final String sender;
  final VoidCallback onDelete;
  final VoidCallback onArchive;

  const EmailListItem({
    Key? key,
    required this.subject,
    required this.sender,
    required this.onDelete,
    required this.onArchive,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Slidable(
      // Required key for dismissible functionality
      key: ValueKey(subject),

      // Start action pane (left side in LTR)
      startActionPane: ActionPane(
        motion: const ScrollMotion(),
        extentRatio: 0.25,
        children: [
          SlidableAction(
            onPressed: (context) => onArchive(),
            backgroundColor: const Color(0xFF7BC043),
            foregroundColor: Colors.white,
            icon: Icons.archive,
            label: 'Archive',
          ),
        ],
      ),

      // End action pane (right side in LTR)
      endActionPane: ActionPane(
        motion: const DrawerMotion(),
        extentRatio: 0.5,
        children: [
          SlidableAction(
            onPressed: (context) => print('More'),
            backgroundColor: const Color(0xFF0392CF),
            foregroundColor: Colors.white,
            icon: Icons.more_horiz,
            label: 'More',
          ),
          SlidableAction(
            onPressed: (context) => onDelete(),
            backgroundColor: const Color(0xFFFE4A49),
            foregroundColor: Colors.white,
            icon: Icons.delete,
            label: 'Delete',
          ),
        ],
      ),

      // The visible content
      child: ListTile(
        title: Text(subject),
        subtitle: Text(sender),
        leading: const CircleAvatar(child: Icon(Icons.email)),
      ),
    );
  }
}

// Usage in a ListView
// Assuming 'emails' is a List of email objects and 'archiveEmail' is a function
// ListView.builder(
//   itemCount: emails.length,
//   itemBuilder: (context, index) => EmailListItem(
//     subject: emails[index].subject,
//     sender: emails[index].sender,
//     onDelete: () => setState(() => emails.removeAt(index)),
//     onArchive: () => archiveEmail(emails[index]),
//   ),
// );

```

--------------------------------

### Install flutter_slidable Package

Source: https://github.com/letsar/flutter_slidable/blob/master/README.md

To use the flutter_slidable package, add it as a dependency in your pubspec.yaml file and import it into your Dart code.

```yaml
dependencies:
  flutter_slidable: <latest_version>
```

```dart
import 'package:flutter_slidable/flutter_slidable.dart';
```

--------------------------------

### SlidableAction Widget Examples in Dart

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Demonstrates the creation of standard action buttons for Slidable widgets. It shows how to configure actions with icons, labels, background colors, and other properties like flex, autoClose, borderRadius, and spacing. These actions are typically used for common operations like delete or share.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

// Standard action with icon and label
SlidableAction(
  onPressed: (BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Item deleted')),
    );
  },
  backgroundColor: const Color(0xFFFE4A49),
  foregroundColor: Colors.white,
  icon: Icons.delete,
  label: 'Delete',
  // Relative size compared to other actions
  flex: 1,
  // Auto-close slidable after press (default: true)
  autoClose: true,
  // Custom border radius
  borderRadius: BorderRadius.circular(8),
  // Spacing between icon and label (default: 4)
  spacing: 8,
);

// Action with icon only
SlidableAction(
  onPressed: (context) => shareItem(),
  backgroundColor: Colors.blue,
  icon: Icons.share,
);

// Action with label only
SlidableAction(
  onPressed: (context) => editItem(),
  backgroundColor: Colors.orange,
  label: 'Edit',
);
```

--------------------------------

### Implement Swipe-to-Dismiss with DismissiblePane in Flutter

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Demonstrates how to use the DismissiblePane widget to enable swipe-to-dismiss functionality for list items. It includes setting up action panes, defining dismiss thresholds, handling dismissal callbacks, and optionally adding a confirmation dialog before deletion. This example requires the flutter_slidable package.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class DismissibleExample extends StatefulWidget {
  @override
  State<DismissibleExample> createState() => _DismissibleExampleState();
}

class _DismissibleExampleState extends State<DismissibleExample> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return Slidable(
          // Key is REQUIRED for dismissible to work correctly
          key: ValueKey(item),

          startActionPane: ActionPane(
            motion: const DrawerMotion(),

            // Enable dismiss by dragging past threshold
            dismissible: DismissiblePane(
              // Called after dismiss animation completes
              onDismissed: () {
                setState(() => items.removeAt(index));
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('$item dismissed')),
                );
              },

              // Threshold to trigger dismiss (default: 0.75)
              dismissThreshold: 0.75,

              // Duration of dismiss animation
              dismissalDuration: const Duration(milliseconds: 300),

              // Duration of resize animation after dismiss
              resizeDuration: const Duration(milliseconds: 300),

              // Close slidable if dismiss is cancelled
              closeOnCancel: true,

              // Optional confirmation dialog
              confirmDismiss: () async {
                return await showDialog<bool>(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: const Text('Delete item?'),
                    content: Text('Are you sure you want to delete $item?'),
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(false),
                        child: const Text('Cancel'),
                      ),
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(true),
                        child: const Text('Delete'),
                      ),
                    ],
                  ),
                ) ?? false;
              },

              // Custom motion during dismiss
              motion: const InversedDrawerMotion(),
            ),

            children: [
              SlidableAction(
                onPressed: (_) {},
                backgroundColor: Colors.red,
                icon: Icons.delete,
                label: 'Delete',
              ),
            ],
          ),

          child: ListTile(
            title: Text(item),
            subtitle: const Text('Swipe right to delete'),
          ),
        );
      },
    );
  }
}

```

--------------------------------

### Migrate Slidable Structure: ActionPane and Actions (Dart)

Source: https://github.com/letsar/flutter_slidable/wiki/Migration-from-version-0.6.0-to-version-1.0.0

Illustrates the structural changes in the 'Slidable' widget for managing actions between versions 0.6.0 and 1.0.0. Version 1.0.0 decouples action panes and uses 'ActionPane' with 'startActionPane' and 'endActionPane' properties.

```dart
Slidable(
  startActionPane: ActionPane(
    motion: const DrawerMotion(),
    extentRatio: 0.25,
    children: [
      SlidableAction(
        label: 'Archive',
        backgroundColor: Colors.blue,
        icon: Icons.archive,
        onPressed: (context) {},
      ),
    ],
  ),
  endActionPane: ActionPane(
    motion: const DrawerMotion(),
    extentRatio: 0.25,
    children: [
      SlidableAction(
        label: 'Delete',
        backgroundColor: Colors.red,
        icon: Icons.delete,
        onPressed: (context) {},
      ),
    ],
  ),
  child: const MyWidget(),
);
```

--------------------------------

### Slidable Motion Widgets Showcase in Dart

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Presents examples of the four built-in motion animations for Slidable widgets: BehindMotion, DrawerMotion, ScrollMotion, and StretchMotion. Each motion defines how the action widgets appear and animate when the slidable item is swiped, offering different visual effects. The code demonstrates how to apply these motions to the ActionPane.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class MotionShowcase extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // BehindMotion: Actions appear stationary behind the slidable
        Slidable(
          startActionPane: ActionPane(
            motion: const BehindMotion(),
            children: [_buildAction('Behind', Colors.blue)],
          ),
          child: _buildTile('Behind Motion'),
        ),

        // DrawerMotion: Actions slide in like drawers
        Slidable(
          startActionPane: ActionPane(
            motion: const DrawerMotion(),
            children: [_buildAction('Drawer', Colors.green)],
          ),
          child: _buildTile('Drawer Motion'),
        ),

        // ScrollMotion: Actions follow the slidable movement
        Slidable(
          startActionPane: ActionPane(
            motion: const ScrollMotion(),
            children: [_buildAction('Scroll', Colors.orange)],
          ),
          child: _buildTile('Scroll Motion'),
        ),

        // StretchMotion: Actions stretch to fill available space
        Slidable(
          startActionPane: ActionPane(
            motion: const StretchMotion(),
            children: [_buildAction('Stretch', Colors.purple)],
          ),
          child: _buildTile('Stretch Motion'),
        ),
      ],
    );
  }

  Widget _buildAction(String label, Color color) => SlidableAction(
    onPressed: (_) {},
    backgroundColor: color,
    label: label,
  );

  Widget _buildTile(String text) => ListTile(title: Text(text));
}

```

--------------------------------

### Migrate Dismissible Behavior: SlidableDismissal to DismissiblePane (Dart)

Source: https://github.com/letsar/flutter_slidable/wiki/Migration-from-version-0.6.0-to-version-1.0.0

Shows the transition for handling dismissible behavior in the 'Slidable' widget from version 0.6.0 to 1.0.0. The 'dismissal' property is replaced by setting a 'DismissiblePane' within the 'ActionPane'.

```dart
Slidable(
  key: ValueKey(0), // A key is necessary.
  startActionPane: ActionPane(
    dismissible: DismissiblePane(
      onDismissed: () {
        // Remove this Slidable from the widget tree.
      },
    ),
  ),
);
```

--------------------------------

### Migrate Slide Action: IconSlideAction to SlidableAction (Dart)

Source: https://github.com/letsar/flutter_slidable/wiki/Migration-from-version-0.6.0-to-version-1.0.0

Demonstrates the migration of the 'IconSlideAction' widget from version 0.6.0 to 'SlidableAction' in version 1.0.0. This change involves renaming the widget and updating parameter names for caption/label and color.

```dart
SlidableAction(
  label: 'Archive',
  backgroundColor: Colors.blue,
  icon: Icons.archive,
  onPressed: (context) {},
);
```

--------------------------------

### Vertical Slidable Example in Dart

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Demonstrates how to configure a Slidable widget to work in a vertical direction, suitable for horizontal lists or custom layouts. The direction property is set to Axis.vertical, and start/endActionPane are used for top and bottom actions respectively.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class VerticalSlidableExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: List.generate(5, (index) {
          return Slidable(
            key: ValueKey(index),

            // Set direction to vertical
            direction: Axis.vertical,

            // Start pane appears at top when direction is vertical
            startActionPane: ActionPane(
              motion: const ScrollMotion(),
              extentRatio: 0.3,
              children: [
                SlidableAction(
                  onPressed: (_) => print('Like $index'),
                  backgroundColor: Colors.green,
                  icon: Icons.thumb_up,
                ),
              ],
            ),

            // End pane appears at bottom when direction is vertical
            endActionPane: ActionPane(
              motion: const ScrollMotion(),
              extentRatio: 0.3,
              children: [
                SlidableAction(
                  onPressed: (_) => print('Dislike $index'),
                  backgroundColor: Colors.red,
                  icon: Icons.thumb_down,
                ),
              ],
            ),

            child: Container(
              width: 150,
              margin: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: Colors.blue[100],
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(child: Text('Card $index\n(Swipe up/down)')),
            ),
          );
        }),
      ),
    );
  }
}

```

--------------------------------

### SlidableAutoCloseBehavior Example in Dart

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Demonstrates how to use SlidableAutoCloseBehavior to ensure only one Slidable item is open at a time within a group. It wraps a ListView and configures closeWhenOpened and closeWhenTapped properties. The groupTag property is used to define independent groups of Slidables.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class AutoCloseExample extends StatelessWidget {
  final List<String> items = List.generate(10, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    // Wrap your list with SlidableAutoCloseBehavior
    return SlidableAutoCloseBehavior(
      // Close other slidables when one opens
      closeWhenOpened: true,
      // Close all slidables when tapping on a closed one
      closeWhenTapped: true,
      child: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Slidable(
            key: ValueKey(items[index]),

            // groupTag groups slidables - only one per group stays open
            groupTag: 'myList',

            endActionPane: ActionPane(
              motion: const ScrollMotion(),
              children: [
                SlidableAction(
                  onPressed: (_) => print('Edit ${items[index]}'),
                  backgroundColor: Colors.blue,
                  icon: Icons.edit,
                  label: 'Edit',
                ),
                SlidableAction(
                  onPressed: (_) => print('Delete ${items[index]}'),
                  backgroundColor: Colors.red,
                  icon: Icons.delete,
                  label: 'Delete',
                ),
              ],
            ),
            child: ListTile(
              title: Text(items[index]),
              subtitle: const Text('Swipe left for actions'),
            ),
          );
        },
      ),
    );
  }
}

// Multiple groups example - each group manages its own open state
class MultiGroupExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SlidableAutoCloseBehavior(
      child: Column(
        children: [
          const Text('Group A'),
          // These share groupTag 'groupA'
          _buildSlidable('A1', 'groupA'),
          _buildSlidable('A2', 'groupA'),
          const Divider(),
          const Text('Group B'),
          // These share groupTag 'groupB'
          _buildSlidable('B1', 'groupB'),
          _buildSlidable('B2', 'groupB'),
        ],
      ),
    );
  }

  Widget _buildSlidable(String text, String group) {
    return Slidable(
      groupTag: group,
      endActionPane: ActionPane(
        motion: const DrawerMotion(),
        children: [
          SlidableAction(
            onPressed: (_) {},
            backgroundColor: Colors.blue,
            icon: Icons.info,
          ),
        ],
      ),
      child: ListTile(title: Text(text)),
    );
  }
}

```

--------------------------------

### CustomSlidableAction Widget Example in Dart

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Illustrates how to use the CustomSlidableAction widget to create highly customized action buttons within a Slidable widget. This allows for complex layouts using any Flutter widget as the child, offering greater flexibility beyond standard icon and label combinations. It supports properties like backgroundColor, foregroundColor, flex, autoClose, borderRadius, and padding.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

// Custom action with any widget as child
CustomSlidableAction(
  onPressed: (BuildContext context) {
    // Handle action
  },
  backgroundColor: Colors.purple,
  foregroundColor: Colors.white,
  flex: 1,
  autoClose: true,
  borderRadius: BorderRadius.circular(12),
  padding: const EdgeInsets.all(8),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Icon(Icons.star, size: 32),
      const SizedBox(height: 4),
      const Text('Favorite', style: TextStyle(fontSize: 12)),
      Container(
        margin: const EdgeInsets.only(top: 4),
        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
        decoration: BoxDecoration(
          color: Colors.white24,
          borderRadius: BorderRadius.circular(4),
        ),
        child: const Text('NEW', style: TextStyle(fontSize: 8)),
      ),
    ],
  ),
);
```

--------------------------------

### Control Slidable Programmatically with SlidableController (Dart)

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Demonstrates how to use SlidableController to programmatically control a Slidable widget. This includes initializing the controller, managing its lifecycle, and using methods like openStartActionPane(), openEndActionPane(), and close() to interact with the Slidable. It also shows how to access the controller from a child widget using Slidable.of(context).

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class ProgrammaticControlExample extends StatefulWidget {
  @override
  State<ProgrammaticControlExample> createState() => _ProgrammaticControlExampleState();
}

class _ProgrammaticControlExampleState extends State<ProgrammaticControlExample>
    with SingleTickerProviderStateMixin {
  late final SlidableController _controller;

  @override
  void initState() {
    super.initState();
    _controller = SlidableController(this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Slidable(
          controller: _controller,
          startActionPane: ActionPane(
            motion: const DrawerMotion(),
            extentRatio: 0.4,
            children: [
              SlidableAction(
                onPressed: (_) => print('Archive'),
                backgroundColor: Colors.green,
                icon: Icons.archive,
                label: 'Archive',
              ),
            ],
          ),
          endActionPane: ActionPane(
            motion: const DrawerMotion(),
            extentRatio: 0.4,
            children: [
              SlidableAction(
                onPressed: (_) => print('Delete'),
                backgroundColor: Colors.red,
                icon: Icons.delete,
                label: 'Delete',
              ),
            ],
          ),
          child: const ListTile(title: Text('Swipe me or use buttons')),
        ),
        const SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () => _controller.openStartActionPane(),
              child: const Text('Open Start'),
            ),
            ElevatedButton(
              onPressed: () => _controller.openEndActionPane(),
              child: const Text('Open End'),
            ),
            ElevatedButton(
              onPressed: () => _controller.close(),
              child: const Text('Close'),
            ),
          ],
        ),
      ],
    );
  }
}

// Access controller from child widget using Slidable.of()
class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        // Open end actions on long press
        Slidable.of(context)?.openEndActionPane();
      },
      onDoubleTap: () {
        // Close on double tap
        Slidable.of(context)?.close();
      },
      child: Container(
        padding: const EdgeInsets.all(16),
        child: const Text('Long press to open, double tap to close'),
      ),
    );
  }
}

```

--------------------------------

### Configure ActionPane with Customizations in Flutter

Source: https://context7.com/letsar/flutter_slidable/llms.txt

Shows how to configure an ActionPane with custom animation motion, extent ratio, and thresholds for opening and closing. It also demonstrates using multiple SlidableActions within an ActionPane, controlling their relative sizes with the 'flex' property. This requires the flutter_slidable package.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

// ActionPane with custom thresholds and motion
ActionPane(
  // Animation type: BehindMotion, DrawerMotion, ScrollMotion, or StretchMotion
  motion: const DrawerMotion(),

  // How much of the Slidable width the action pane takes (0-1)
  extentRatio: 0.4,

  // Threshold to auto-open when drag ends (default: extentRatio / 2)
  openThreshold: 0.1,

  // Threshold to auto-close when drag ends (default: extentRatio / 2)
  closeThreshold: 0.3,

  children: [
    SlidableAction(
      onPressed: (context) {},
      backgroundColor: Colors.blue,
      icon: Icons.share,
      label: 'Share',
    ),
    SlidableAction(
      // flex controls relative size of actions
      flex: 2,
      onPressed: (context) {},
      backgroundColor: Colors.red,
      icon: Icons.delete,
      label: 'Delete',
    ),
  ],
);

```

--------------------------------

### Todo List with Swipe Actions (Dart)

Source: https://context7.com/letsar/flutter_slidable/llms.txt

This Dart code implements a complete todo list application using the flutter_slidable package. It defines a Todo model, a list screen with swipeable list items, and handles actions like toggling completion and deleting todos. The code demonstrates the integration of Slidable, ActionPane, SlidableAction, and SlidableAutoCloseBehavior for creating interactive swipe gestures.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() => runApp(const TodoApp());

class TodoApp extends StatelessWidget {
  const TodoApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo Slidable Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const TodoListScreen(),
    );
  }
}

class Todo {
  final String id;
  final String title;
  bool completed;

  Todo({required this.id, required this.title, this.completed = false});
}

class TodoListScreen extends StatefulWidget {
  const TodoListScreen({Key? key}) : super(key: key);

  @override
  State<TodoListScreen> createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  final List<Todo> todos = [
    Todo(id: '1', title: 'Buy groceries'),
    Todo(id: '2', title: 'Walk the dog'),
    Todo(id: '3', title: 'Read a book'),
    Todo(id: '4', title: 'Exercise'),
    Todo(id: '5', title: 'Call mom'),
  ];

  void _toggleComplete(int index) {
    setState(() {
      todos[index].completed = !todos[index].completed;
    });
    Slidable.of(context)?.close();
  }

  void _deleteTodo(int index) {
    final removed = todos[index];
    setState(() => todos.removeAt(index));
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('${removed.title} deleted'),
        action: SnackBarAction(
          label: 'Undo',
          onPressed: () => setState(() => todos.insert(index, removed)),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Todos')),
      body: SlidableAutoCloseBehavior(
        child: ListView.separated(
          itemCount: todos.length,
          separatorBuilder: (_, __) => const Divider(height: 1),
          itemBuilder: (context, index) {
            final todo = todos[index];
            return Slidable(
              key: ValueKey(todo.id),
              groupTag: 'todos',

              // Swipe right to complete
              startActionPane: ActionPane(
                motion: const BehindMotion(),
                extentRatio: 0.25,
                children: [
                  SlidableAction(
                    onPressed: (_) => _toggleComplete(index),
                    backgroundColor: todo.completed ? Colors.orange : Colors.green,
                    foregroundColor: Colors.white,
                    icon: todo.completed ? Icons.undo : Icons.check,
                    label: todo.completed ? 'Undo' : 'Done',
                  ),
                ],
              ),

              // Swipe left to delete (with dismiss)
              endActionPane: ActionPane(
                motion: const StretchMotion(),
                extentRatio: 0.25,
                dismissible: DismissiblePane(
                  onDismissed: () => _deleteTodo(index),
                ),
                children: [
                  SlidableAction(
                    onPressed: (_) => _deleteTodo(index),
                    backgroundColor: Colors.red,
                    foregroundColor: Colors.white,
                    icon: Icons.delete,
                    label: 'Delete',
                  ),
                ],
              ),

              child: ListTile(
                leading: Icon(
                  todo.completed ? Icons.check_circle : Icons.circle_outlined,
                  color: todo.completed ? Colors.green : Colors.grey,
                ),
                title: Text(
                  todo.title,
                  style: TextStyle(
                    decoration: todo.completed ? TextDecoration.lineThrough : null,
                    color: todo.completed ? Colors.grey : null,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

```

--------------------------------

### Control Slidable Actions Programmatically with SlidableController (Dart)

Source: https://github.com/letsar/flutter_slidable/blob/master/README.md

Demonstrates how to use SlidableController to programmatically open or close the action panes of a Slidable widget in Flutter. This requires initializing a SlidableController and assigning it to the 'controller' property of the Slidable widget.

```dart
final controller = SlidableController();

// ...

Slidable(
  controller: controller,
  // ...
);

// ...

// Open the actions
void _handleOpen() {
  controller.openEndActionPane();
  // OR
  //controller.openStartActionPane();
}

void _handleOpen() {
  controller.close();
}
```

--------------------------------

### Programmatically Open Slidable

Source: https://github.com/letsar/flutter_slidable/wiki/FAQ

Open a Slidable's action pane programmatically using a `SlidableController`. Obtain the controller within the Slidable's child and call methods like `openEndActionPane()` or `openStartActionPane()`.

```dart
Slidable(
  controller: (controller) => _slidableController = controller,
  child: Builder(builder: (context) {
    return IconButton(
      icon: Icon(Icons.open_in_new),
      onPressed: () => _slidableController?.openEndActionPane(),
    );
  }),
)
```

--------------------------------

### Make Slidable Dismissible

Source: https://github.com/letsar/flutter_slidable/wiki/FAQ

Enable dismissal of a Slidable widget by setting the `dismissible` parameter of an `ActionPane` to a `DismissiblePane`. A `ValueKey` is mandatory when using a dismissible Slidable.

```dart
Slidable(
  key: ValueKey(item),
  startActionPane: ActionPane(
    dismissible: DismissiblePane(onDismissed: () { /* handle dismiss */ }),
  )
)
```

--------------------------------

### Control Dismissal Confirmation

Source: https://github.com/letsar/flutter_slidable/wiki/FAQ

Allow users to cancel a dismissal action by providing a `confirmDismiss` callback to the `DismissiblePane`. This callback can display a dialog for user confirmation.

```dart
DismissiblePane( 
  confirmDismiss: () async {
    // Show a confirmation dialog
    return await showDialog<bool>(context: context, builder: (context) => AlertDialog(title: Text('Confirm Dismissal?')));
  },
  onDismissed: () { /* handle dismiss */ }
)
```

--------------------------------

### Manage Multiple Open Slidables

Source: https://github.com/letsar/flutter_slidable/wiki/FAQ

Ensure only one Slidable within a group remains open by assigning the same `groupTag` to them and wrapping them with `SlidableAutoCloseBehavior`. Independent Slidables can use different `groupTag` values.

```dart
SlidableAutoCloseBehavior(
  child: ListView(
    children: [
      Slidable(groupTag: '0'),
      Slidable(groupTag: '0'),
      Slidable(groupTag: '1'),
    ],
  ),
)
```

--------------------------------

### Prevent Slidable Close on Scroll

Source: https://github.com/letsar/flutter_slidable/wiki/FAQ

Prevent a Slidable widget from closing automatically when the nearest Scrollable widget begins to scroll. Set the `closeOnScroll` constructor parameter to `false`.

```dart
Slidable( closeOnScroll: false, ... )
```

--------------------------------

### Prevent SlidableAction Auto-Close

Source: https://github.com/letsar/flutter_slidable/wiki/FAQ

Control whether a SlidableAction widget automatically closes the slidable after being tapped. Set `autoClose` to `false` to disable this behavior.

```dart
SlidableAction( autoClose: false, ... )
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.