Trigger slidable from button flutter - flutter

Question

I'm using the flutter_slidable package to delete items from a list I have in my app. But I would like to create a button outside of the listview that can trigger these items to display their slidables, but I am unsure how to do this from the documentation provided
https://pub.dev/packages/flutter_slidable
bool isClicked = false;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Brightness.light,
leading: new IconButton(
icon: new Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {
Navigator.of(context).pop();
},
),
backgroundColor: Colors.white,
title: const Text(
'User Cards',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black, fontSize: 20.0),
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Row(
children: <Widget>[
GestureDetector(
onTap: () {
Provider.of<CardBrandProvider>(context, listen: false).clearCardBrand();
Provider.of<Data>(context, listen: false).selectedBrand = null;
Navigator.push(context, MaterialPageRoute(builder: (context) => AddCard()));
},
child: Row(
children: <Widget>[
Icon(
Icons.card_giftcard,
color: Colors.grey[600],
size: 28.0,
),
Icon(
Icons.add,
size: 20.0,
color: Colors.black45,
),
],
)),
],
),
)
],
elevation: 1.0,
centerTitle: true,
),
body: CustomScrollView(
slivers: [
Provider.of<CardProvider>(context, listen: false).cards.isNotEmpty ?
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Padding(
padding: const EdgeInsets.only(left: 30.0, right: 26.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Cards',
style: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.w500,
fontFamily: 'Lato'),
),
GestureDetector(
onTap: (){
isClicked = true;
},
child: Text(
'Edit',
style: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(129, 2, 2, 1),
fontFamily: 'Lato'),
),
),
],
),
),
),
)
:
SliverToBoxAdapter(child: Container(),),
SliverToBoxAdapter(
child: SizedBox(
height: 25,
),
),
Container(
child: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
var card = getCards(context)[index];
var id = card.Id;
return InkWell(
child: Padding(
padding: const EdgeInsets.only(top: 15, bottom: 15),
child: Column(
children: [
Container(
child: Slidable(
enabled: isClicked,
actionPane: SlidableDrawerActionPane(),
secondaryActions: <Widget>[
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () async {
setState(() {
showSpinner = true;
});
try{
print('$id');
setState(() {
Provider.of<Cards>(context, listen: false).removeIndividualCard(index);
});
} catch(e){
print(e);
setState(() {
showSpinner = true;
});
}
}),
],
child: ListTile(
title: Text('Username$index'),
trailing: Icon(Icons.person),
),
),
),
],
),
),
);
},
childCount: 5,
),
],
),
);
}
}

Answer 1

make a button and handle: Slidable(enabled: false,)