I am using the package flutter_slidable, which is amazing to get extra functionalities in list items. However, I still can't figure out how to control a Slidable widget from outside its tree.
Simple App:
I have a ListView and each one of its items is wrapped with a Slidable. These tiles are composed by a TextFormField. I would like to be able to close a Slidable by tapping another tile. To be more precise, by tapping the TextFormField of another tile.
There are three tiles with Slidables attached to them.
In the following images, from left to right:
- I slide the second tile.
- I tap the
TextFormFieldof the third tile. - Then, the
Slidableof the second tile should be closed.
Main Page:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
elevation: 0,
title: const Text('Slidable from outside'),
),
body: SlidableAutoCloseBehavior(
closeWhenOpened: true,
closeWhenTapped: false,
child: ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return const MyTile();
},
),
),
),
);
}
}
Tile:
class MyTile extends StatelessWidget {
const MyTile({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Slidable(
closeOnScroll: false,
startActionPane: const ActionPane(
dragDismissible: false,
motion: ScrollMotion(),
children: [
SlidableAction(
backgroundColor: Color(0xFFe0e0e0),
icon: Icons.remove_circle_outline_outlined,
autoClose: false,
onPressed: null,
),
SlidableAction(
backgroundColor: Color(0xFFe0e0e0),
icon: Icons.add_circle_outline_outlined,
autoClose: false,
onPressed: null,
),
],
),
child: Container(
padding: const EdgeInsets.all(24),
child: TextFormField(
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.grey[800],
),
decoration: const InputDecoration(
isDense: true,
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
),
initialValue: '25.000',
onTap: () {
//Some code that triggers the close action of another Slidable
},
),
),
);
}
}
From what I understand, in old versions of this package you used a SlidableController, but it has changed now. A recommended way is to wrap the list with a SlidableAutoCloseBehavior, but it can't control each Slidable independently.
The parameter closeWhenTapped is the closest to a solution because if I set this to true, it let me close the tile after tapping in another tile, but, I have to tap twice, hence the TextFormField is not selectable at first touch. So I set it to false in order to let me select the TextFormField although without being able to close the Slidable automatically.
