slide_item 1.0.8 slide_item: ^1.0.8 copied to clipboard
The Flutter ListView's Item sliding component. You don’t need to change the existing code, you only need to wrap the original Widget with two widgets provided by this package
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:slide_item/slide_item.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class Item {
Color color;
int index;
Item(this.color, this.index);
}
class _MyHomePageState extends State<MyHomePage> {
List<Item> colors;
@override
void initState() {
super.initState();
Random random = Random();
colors = List.generate(
30,
(index) => Item(
Color.fromARGB(255, random.nextInt(255), random.nextInt(255),
random.nextInt(255)),
index));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SlideConfiguration(
config: SlideConfig(
slideOpenAnimDuration: Duration(milliseconds: 200),
slideCloseAnimDuration: Duration(milliseconds: 400),
deleteStep1AnimDuration: Duration(milliseconds: 250),
deleteStep2AnimDuration: Duration(milliseconds: 300),
supportElasticity: true,
closeOpenedItemOnTouch: true,
// slideProportion: 0.2,
slideWidth: 40,
actionOpenCloseThreshold: 0.3,
backgroundColor: Colors.white),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
itemBuilder: (_, index) => Builder(
builder: (_) {
print('debug -> build at builder $index');
return SlideItem(
indexInList: index,
slideWidth: index == 3 ? 100 : null,
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.green)),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.person_outline),
Text('index ${colors[index].index}')
],
),
Container(
height: (colors[index].index % 6 + 3) * 14.0,
color: colors[index].color,
)
],
),
),
onTap: () {
print('debug -> click at item ${colors[index].index}');
},
),
actions: <SlideAction>[
if (index % 2 == 0)
SlideAction(
actionWidget: Container(
child: Icon(Icons.gamepad),
color: Colors.purple,
),
tapCallback: (_) {
print('debug -> click at gamepad ${_.indexInList}');
_.close();
}),
SlideAction(
actionWidget: Container(
child: Icon(Icons.delete),
color: Colors.blue,
),
tapCallback: (_) {
print('debug -> click at delete ${_.indexInList}');
_.delete().then((_) {
print('debug -> ${colors[index].index} removed');
setState(() {
colors.removeAt(index);
});
});
},
isDeleteButton: true),
if (index % 2 != 0)
SlideAction(
actionWidget: Container(
child: Icon(Icons.directions),
color: Colors.orange,
),
tapCallback: (_) {
print(
'debug -> click at directions ${_.indexInList}');
// _.close();
}),
],
leftActions: <SlideAction>[
if (index % 2 == 0)
SlideAction(
actionWidget: Container(
child: Icon(Icons.adjust),
color: Colors.blueGrey,
),
tapCallback: (_) {
// _.close();
print('debug -> click at adjust ${_.indexInList}');
}),
if (index % 3 == 0)
SlideAction(
actionWidget: Container(
child: Icon(Icons.delete_forever),
color: Colors.red,
),
tapCallback: (_) {
_.delete()?.then((value) {
setState(() {
colors.removeAt(index);
});
});
},
isDeleteButton: true,
)
],
);
},
),
itemCount: colors.length,
),
),
),
);
}
}