Flutter slidable item on list view - slide left or right to see actions free source code

 

Package :

flutter pub add flutter_slidable

Source Code :

import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main() { runApp(const MaterialApp( debugShowCheckedModeBanner: false, home: SlidableDemo())); } class SlidableDemo extends StatefulWidget { const SlidableDemo({Key? key}) : super(key: key); @override State<SlidableDemo> createState() => _SlidableDemoState(); } class _SlidableDemoState extends State<SlidableDemo> { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Color.fromARGB(255, 247, 235, 202), body: buildListView(), ); } Widget buildListView() { List items = ['Dog', 'Cat', 'Tiger', 'Duck', 'Lion', 'Monkey', 'Pig']; return Container( child: ListView( children: [ ...items.map((item) { return 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( dragDismissible: false, // A motion is a widget used to control how the pane animates. motion: const ScrollMotion(), extentRatio: 0.35, // A pane can dismiss the Slidable. dismissible: DismissiblePane(onDismissed: () {}), // All actions are defined in the children parameter. children: [ // A SlidableAction can have an icon and/or a label. IconButton(onPressed: () {}, icon: Icon(Icons.share)), IconButton(onPressed: () {}, icon: Icon(Icons.edit)), ], ), child: Card( margin: const EdgeInsets.all(5), child: Center( child: Padding( padding: const EdgeInsets.all(15), child: Text( item.toString(), style: const TextStyle( fontSize: 24, color: Color.fromARGB(255, 15, 65, 201)), ), ), ), ), ); }).toList() ], ), ); } }

Video :