We have seen that Taobao has a feature to remove the list of goods by swiping. Today, we will use Flutter to implement it and get to the point directly.

1. Add dependencies

Flutter_slidable: 0.5.3Copy the code

2. Get dependencies

flutter pub getCopy the code

3. Import dependencies

import 'package:flutter_slidable/flutter_slidable.dart';
Copy the code

4. Create a list sideslip

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:oktoast/oktoast.dart';

///create time : 2019/9/18/018  16:00
///create by : Administrator
///des:

class MyListSlidable extends StatefulWidget {
  @override
  _MyListSlidableState createState() => _MyListSlidableState();
}

class _MyListSlidableState extends State<MyListSlidable> {
  List<int> datas = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  Widget _itemBuilder(BuildContext context, int position) {
    returnContainer(margin: EdgeInsets. All (5.0), Child: Slidable(key: key (datas[position].tostring ()), actionPane: SlidableDrawerActionPane(), actionExtentRatio: 0.25, child: Container(height: 80, width: double. Infinity, color: Colors.blue, alignment: Alignment.center, child: Text("product${datas[position]}",
            style: TextStyle(color: Colors.white),
          ),
        ),
        actions: <Widget>[
          IconSlideAction(
            caption: 'archive',
            color: Colors.blue,
            icon: Icons.archive,
            onTap: () => showToast('Archive'),
            closeOnTap: false,
          ),
          IconSlideAction(
            caption: 'sharing',
            color: Colors.indigo,
            icon: Icons.share,
            onTap: () => showToast('Share'),
          ),
        ],
        secondaryActions: <Widget>[
          IconSlideAction(
            caption: 'more',
            color: Colors.black45,
            icon: Icons.more_horiz,
            onTap: () => showToast('More'),
          ),
          IconSlideAction(
            caption: 'delete',
            color: Colors.red,
            icon: Icons.delete,
            onTap: () => showToast('delete'() [() [() [() } @override Widget build(BuildContext context) {returnContainer( child: ListView.builder(itemBuilder: _itemBuilder, itemCount: datas.length), ); }}Copy the code

5. Effect picture:




6,

There are two types of action buttons in the side slide panel

  • Text style with icon: IconSlideAction
  • Contains only the text: SlideAction

There are four actions panel styles:

SlidableBehindActionPane: This effect is as if the panel is placed one layer below the subitems of the list





SlidableScrollActionPane: This effect is that the panel follows the list subitems without overlay, layering, squeezing, etc





SlidableDrawerActionPane: The effect is that two panels are behind the list items, but the panels are superimposed



SlidableStrechActionPane: This is also the effect of the panel following the subitems of the list, which shrinks to create a squeeze