stacked_listview

A Stacked ListView

Video

v1.0.4 Breaking Change

• onRemove(int index) changed to onRemove(int index, AxisDirection dir)
• beforeRemove(int index) changed to beforeRemove(int index, AxisDirection dir)

🎉🎉 Yes, Now you can know the user's swipe direction for each list item 🎉🎉

Install

flutter pub add stacked_listview

Example code:

Scaffold(
  appBar: AppBar(),
  backgroundColor: Colors.black,
  body: SafeArea(
    child: StackedListView(
      padding: EdgeInsets.only(left: 20, right: 20, top: 50),
      itemCount: data.length,
      itemExtent: itemHeight,
      heightFactor: 0.7,
      fadeOutFrom: 0.7,
      onRemove: (index, direction) {
        setState(() {
          data.removeAt(index);
        });
      },
      beforeRemove: (index, direction) async {
        return await showDialog<bool>(
          context: context,
          builder: (_) => AlertDialog(
            title: Text('Delete ${data[index]} ?'),
            actions: [
              TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text('Cancel')),
              ElevatedButton(
                onPressed: () => Navigator.pop(context, true),
                child: Text('Delete'),
              ),
            ],
          ),
        ).then((value) => value == true);
      },
      builder: (_, index) {
        return Container(
          width: double.infinity,
          height: itemHeight,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
            color: Colors.white,
            boxShadow: [
              BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 10),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                data[index],
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              Text('Slide to left or right to delete'),
            ],
          ),
          padding: EdgeInsets.all(20),
        );
      },
    ),
  ),
);