Is there a solution to close a slidable by tapping anywhere on the screen automatically instead of doing it manually?, as example i have this code :
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({
super.key,
});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
late final controller = SlidableController(this);
// Define a list of items
final List<String> items = List.generate(10, (index) => 'Item $index');
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Slidable Example',
home: Scaffold(
appBar: AppBar(title: const Text('Slidable List Example')),
body: SlidableAutoCloseBehavior(
child: Column(
children: [
const Text(
"HELLO",
style: TextStyle(fontSize: 50),
),
Flexible(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Slidable(
key: ValueKey(index),
startActionPane: ActionPane(
motion: const ScrollMotion(),
children: [
SlidableAction(
onPressed: (context) => editItem(context, index),
backgroundColor: const Color(0xFF21B7CA),
foregroundColor: Colors.white,
icon: Icons.edit,
label: 'Edit',
),
SlidableAction(
onPressed: (context) => deleteItem(index),
backgroundColor: const Color(0xFFFE4A49),
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'Delete',
),
],
),
endActionPane: ActionPane(
motion: const ScrollMotion(),
children: [
SlidableAction(
onPressed: (context) =>
controller.openEndActionPane(),
backgroundColor: const Color(0xFF7BC043),
foregroundColor: Colors.white,
icon: Icons.archive,
label: 'Archive',
),
SlidableAction(
onPressed: (context) => controller.close(),
backgroundColor: const Color(0xFF0392CF),
foregroundColor: Colors.white,
icon: Icons.save,
label: 'Save',
),
],
),
child: ListTile(title: Text(items[index])),
);
},
),
),
],
),
),
),
);
}
// Method to handle item editing
void editItem(BuildContext context, int index) {
// For demonstration, showing a simple dialog to edit item
showDialog(
context: context,
builder: (context) {
final TextEditingController controller =
TextEditingController(text: items[index]);
return AlertDialog(
title: const Text('Edit Item'),
content: TextField(
controller: controller,
decoration: const InputDecoration(hintText: 'Enter new value'),
),
actions: [
TextButton(
onPressed: () {
setState(() {
items[index] = controller.text;
});
Navigator.of(context).pop();
},
child: const Text('Save'),
),
],
);
},
);
}
// Method to handle item deletion
void deleteItem(int index) {
setState(() {
items.removeAt(index);
});
}
}
in this code i need to close the slidable even when tapping oustide the list, on “HELLO” as example.