Flutter原生侧滑删除组件Dismissible

Dismissible：https://docs.flutter.io/flutter/widgets/Dismissible-class.html

基本步骤：

（1）创建一个State全局的List变量
（2）用Dismissible包装每一个item
（3）设置Dismissible的background，提供删除时的UI显示

import 'package:flutter/material.dart';

class DismissibleDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _DismissibleDemoPagePageState();
}

// 侧滑删除列表界面
class _DismissibleDemoPagePageState extends State<DismissibleDemoPage> {
  final items = List<String>.generate(10, (i) => "Item $i");

  @override
  void initState() {
    super.initState();
  }

//  Widget build(BuildContext context) {
//    return Scaffold(
//        appBar: new AppBar(
//          title: new Text('Dismissible Demo'),
//        ),
//      body: ListView.builder(
//          itemCount: items.length,
//          itemBuilder: (context, index) {
//            final item = items[index];
//            return Dismissible(
//              key: Key(item),
//              crossAxisEndOffset: 100.0,
//              onDismissed: (direction) {
//                setState(() {
//                  items.removeAt(index);
//                  print(direction);
//                });
//                Scaffold.of(context)
//                    .showSnackBar(SnackBar(content: Text('remove $item')));
//              },
//              child: ListTile(
//                title: Text('$item'),
//              ),
//              background: Container(
//                color: Colors.red,
//              ),
//            );
//          }),
//    );
//  }

  @override
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Builder(builder: (BuildContext context) {
          return Center(
            child: Stack(
              children: _buildCards(context),
            ));
        }),
      ),
    );
  }

  List<Widget> _buildCards(BuildContext context) {
    var cards = List<Widget>();
    for (String item in items) {
      cards.add(Dismissible(
          key: Key(item),
          background: Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.only(right: 16.0),
            color: Colors.red,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text('Dismiss',
                    style: Theme
                        .of(context)
                        .primaryTextTheme
                        .subhead
                        .copyWith(color: Colors.white)),
                Icon(
                  Icons.delete,
                  color: Colors.white,
                ),
              ],
            ),
          ),
          direction: DismissDirection.endToStart,
          child: Container(
            alignment: Alignment.centerLeft,
            color: Colors.blue,
            height: 50.0,
            width: 200.0,
            child: Text(item),
          ),
          // Each Dismissible must contain a Key. Keys allow Flutter to uniquely identify Widgets.
          // key: Key(item), We also need to provide a function that tells our app
          // what to do after an item has been swiped away.
          onDismissed: (direction) {
            // Remove the item from our data source.
            setState(() {
              items.remove(item);
            });
            Scaffold
                .of(context)
                .showSnackBar(SnackBar(content: Text("$item dismissed")));
          }));
    }

    return cards;
  }
}