Как реализовать смахивание, чтобы удалить просмотр списка, чтобы удалить данные из магазина

Question

Я очень плохо знаком с флаттером и дротиком, так что это может быть основным вопросом. Тем не менее, я хотел бы знать, как реализовать метод удаления в виде списка, чтобы удалить данные из firestore.

Я пытался использовать функцию Dissptable, но я не понимаю, как отобразить список, и я не могу понять, как удалить выбранные данные.

Это мой код дротика

Widget build(BuildContext context) {
return new Scaffold(
  resizeToAvoidBottomPadding: false,
  appBar: new AppBar(
    centerTitle: true,
    automaticallyImplyLeading: false,
    title: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: 
<Widget>[
      Text("INVENTORY",textAlign: TextAlign.center,) ,new IconButton(
          icon: Icon(
            Icons.home,
            color: Colors.black,
          ),
          onPressed: () {
            Navigator.push(
              context,
              SlideLeftRoute(widget: MyHomePage()),
            );
          })]),
  ),body: ListPage(),
);
  }
}

 class ListPage extends StatefulWidget {
   @override
  _ListPageState createState() => _ListPageState();
  }

class _ListPageState extends State<ListPage> {

Future getPosts() async{
var firestore = Firestore.instance;

QuerySnapshot gn = await 
firestore.collection("Inventory").orderBy("Name",descending: 
false).getDocuments();

return gn.documents;

}

@override
Widget build(BuildContext context) {
return Container(
  child: FutureBuilder(
      future: getPosts(),
      builder: (_, snapshot){
    if(snapshot.connectionState == ConnectionState.waiting){
      return Center(
        child: Text("Loading"),
      );
    }else{

      return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder:(_, index){
            return EachList(snapshot.data[index].data["Name"].toString(), 
snapshot.data[index].data["Quantity"]);
          });
    }
  }),
 );
 }
}


class EachList extends StatelessWidget{
final String details;
final String name;
EachList(this.name, this.details);
@override
 Widget build(BuildContext context) {
// TODO: implement build
return new Card(
  child:new Container(
    padding: EdgeInsets.all(8.0),
    child: new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Row(
          children: <Widget>[
            new CircleAvatar(child: new Text(name[0].toUpperCase()),),
            new Padding(padding: EdgeInsets.all(10.0)),
            new Text(name, style: TextStyle(fontSize: 20.0),),
          ],
        ),
        new Text(details, style: TextStyle(fontSize: 20.0))
      ],
    ),
  ),
);
  }

}

Answer 1

Вы должны использовать виджет Dismissible. Я использовал его для списка входящих, полученных из Firestore. Внутри вашего EachList верните что-то вроде этого

return Dismissible(
        direction: DismissDirection.startToEnd,
        resizeDuration: Duration(milliseconds: 200),
        key: ObjectKey(snapshot.documents.elementAt(index)),
        onDismissed: (direction) {
          // TODO: implement your delete function and check direction if needed
          _deleteMessage(index);
        },
        background: Container(
          padding: EdgeInsets.only(left: 28.0),
          alignment: AlignmentDirectional.centerStart,
          color: Colors.red,
          child: Icon(Icons.delete_forever, color: Colors.white,),
        ),
        // secondaryBackground: ..., 
        child: ...,
      );

    });

ВАЖНО: чтобы удалить элемент списка, вам нужно удалить его и из списка снимков, а не только из хранилища:

_deleteMessage(index){
  // TODO: here remove from Firestore, then update your local snapshot list
  setState(() {
    snapshot.documents.removeAt(index);
  });
}

Здесь документ: Реализация свайпа, чтобы уволить

А вот и видео от команды Flutter: Виджет недели - Dismissilbe

Answer 2

Вы можете использовать пакет flutter_slidable для достижения того же.

Вы также можете проверить мою команду по крикету на Github, в которой я сделал то же самое, что и выхотите достичь, используя тот же пакет.

Пример использования пакета написан здесь .