0% found this document useful (0 votes)
71 views6 pages

Delete With Slide Action Flutter

The document describes how to create a slidable list in Flutter. It imports the Slidable and Flutter packages. It defines a Slidable widget with leading, trailing, and secondary actions. The Slidable widget wraps a ListTile widget that displays name, phone, and address data from a list of Person objects. Tapping the delete action removes the item from the list and updates the UI.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
71 views6 pages

Delete With Slide Action Flutter

The document describes how to create a slidable list in Flutter. It imports the Slidable and Flutter packages. It defines a Slidable widget with leading, trailing, and secondary actions. The Slidable widget wraps a ListTile widget that displays name, phone, and address data from a list of Person objects. Tapping the delete action removes the item from the list and updates the UI.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

dependencies:

flutter:

sdk: flutter

flutter_slidable: ^0.6.0

Slidable(

actionPane: SlidableDrawerActionPane(),

actionExtentRatio: 0.25,

child: Container(

color: [Link],

child: ListTile(

leading: CircleAvatar(

backgroundColor: [Link],

child: Text('$3'),

foregroundColor: [Link],

),

title: Text('Tile n°$3'),

subtitle: Text('SlidableDrawerDelegate'),

),

),

actions: <Widget>[

IconSlideAction(

caption: 'Archive',

color: [Link],

icon: [Link],

onTap: () => _showSnackBar('Archive'),


),

IconSlideAction(

caption: 'Share',

color: [Link],

icon: [Link],

onTap: () => _showSnackBar('Share'),

),

],

secondaryActions: <Widget>[

IconSlideAction(

caption: 'More',

color: Colors.black45,

icon: Icons.more_horiz,

onTap: () => _showSnackBar('More'),

),

IconSlideAction(

caption: 'Delete',

color: [Link],

icon: [Link],

onTap: () => _showSnackBar('Delete'),

),

],

);

import 'package:flutter/[Link]';

import 'package:flutter_slidable/flutter_slidable.dart';
void main() {

runApp(

MaterialApp(

home: MyApp(),

);

class MyApp extends StatefulWidget{

@override

_MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {

List<Person> persons= [];

@override

void initState() {

//adding item to list, you can add using json from network

[Link](Person(id:"1", name:"Hari Prasad Chaudhary", phone:"9812122233",


address:"Kathmandu, Nepal"));

[Link](Person(id:"2", name:"Krishna Karki", phone:"9812122244", address:"Pokhara, Nepal"));

[Link](Person(id:"3", name:"Ujjwal Joshi", phone:"98121224444", address:"Bangalore, India"));

[Link](Person(id:"4", name:"Samir Hussain Khan", phone:"9812122255", address:"Karachi,


Pakistan"));
[Link]();

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title:Text("Slide And Delete List"),

backgroundColor: [Link],

),

body: SingleChildScrollView(

child: Container(

padding: [Link](10),

child: Column(

children: [Link]((personone){

return Slidable( //enable slidable in list

key: Key([Link]), //set key

// you have to set key, other wise, after removing item from list, -

// - slidable will be opened.

actionPane: SlidableDrawerActionPane(),

actionExtentRatio: 0.15,

actions: [ //action button to show in head

ElevatedButton(

child: Icon([Link]),

onPressed: (){
//action for phone call

},

),

//add more action buttons here

],

child: Card(

child:ListTile(

title: Text([Link]),

subtitle: Text([Link] + "\n" + [Link]),

),

),

secondaryActions: [ //action button to show on tail

ElevatedButton(

style: [Link](

primary: [Link]

),

child: Icon([Link]),

onPressed: (){

//delete action for this button

[Link]((element){

return [Link] == [Link];

}); //go through the loop and match content to delete from list

setState(() {
//refresh UI after deleting element from list

});

},

),

//add more action buttons here.

],

);

}).toList(),

),

),

);

class Person{ //modal class for Person object

String id, name, phone, address;

Person({[Link], [Link], [Link], [Link]});

You might also like