2
votes

Comment implémenter un balayage pour supprimer la vue de liste pour supprimer les données de Firestore

Je suis très nouveau dans le flutter et le dard, c'est peut-être une question de base. Cependant, ce que j'aimerais savoir, c'est comment implémenter une méthode de balayage pour supprimer dans une vue de liste pour supprimer également les données de Firestore.

J'ai essayé d'utiliser la fonction Dissmissible mais je ne comprends pas comment afficher la liste et je n'arrive pas à comprendre comment supprimer les données sélectionnées également.

Voici mon code de fléchettes

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))
      ],
    ),
  ),
);
  }

}


0 commentaires

3 Réponses :


1
votes

Vous pouvez utiliser le package flutter_slidable pour réaliser la même chose.

Vous pouvez également consulter mon équipe de cricket sur Github dans laquelle j'ai fait ce que vous voulez à réaliser, en utilisant le même package.

Des exemples d'utilisation du package sont écrits ici . < / p>


0 commentaires

5
votes

Vous devez utiliser le widget Dismissible. Je l'ai utilisé pour une liste de boîtes de réception récupérée de Firestore. Dans votre EachList, retournez quelque chose comme ceci

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

IMPORTANT: pour supprimer l'élément de la liste, vous devrez également supprimer l'élément de la liste d'instantanés, pas seulement de Firestore: p >

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: ...,
      );

    });

Voici le document: Mettre en œuvre Swipe to Dismiss a >

Et voici une vidéo de l'équipe Flutter: Widget de la semaine - Dismissilbe


2 commentaires

Ça marche! Merci beaucoup. Je me demandais comment faire si je voulais également modifier les détails?


et aussi. Que fait la fonction deleteMessage?



0
votes

Je voudrais ajouter que lors de la suppression d'un document de Firestore, aucun wait n'est nécessaire car le plugin met automatiquement en cache les modifications, puis les synchronise lorsqu'il y a à nouveau une connexion.

Par exemple, j'avais l'habitude d'utiliser cette méthode

  Future deleteWatchlistDocument(NotifierModel notifier) async {
    final String uid = await _grabUID();
    final String notifierID = notifier.documentID;
    return await _returnState(users.document(uid).collection(watchlist).document(notifierID).delete());
  }

dans laquelle j'attendais que l'appel passe, mais cela empêchait tout autre appel de passer et n'en autorisait qu'un. La suppression de cette balise await a cependant résolu mon problème.

Je peux maintenant supprimer des documents hors ligne, et les modifications seront synchronisées avec Firestore lorsqu'une connexion est rétablie. C'est plutôt cool à regarder dans la console.

Je vous recommande de regarder cette vidéo sur l'utilisation hors connexion avec Firestore


1 commentaires

Comme le mentionne @Marco, il est sage de supprimer également le document de l'instantané. J'utilise juste un BLoC pour gérer ça