Question 79171 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter – How to add a loading text when the item is being deleted from database

I’m using ListView builder that fetches the data from the database and shows it in the list.

Future<dynamic> data = Database.getItems();

 child: FutureBuilder(
              future: data,
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.data == null) {
                  return Center(
                      child: LoadingAnimationWidget.staggeredDotsWave(
                          color: Colors.blueAccent, size: 50));
                } else {
                  return ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (BuildContext context, int index) {
                      print(snapshot.data[index]);
                      return ItemWidget(
                          onEditTap: () {
                            setState(() {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => ItemEditPage(
                                          user: user,
                              
                                        )),
                              );
                              data = Database.getItems();
                            });
                          },
                          onDeleteTap: () async {
                            await Database.delete(snapshot.data[index]["_id"]);
                            setState(() {
                              data = Database.getItems();
                            });
                          },
                  
                    },
                  );

Is there any chance when I press the delete button for an item, it waits for the item (show any loading text or anything) and then refreshes the listview?

       onDeleteTap: () async {
             await Database.delete(snapshot.data[index]["_id"]);
 
            // ANY KIND OF LOADING TEXT HERE, A PAUSE THEN CALL setState
             setState(() {
                data = Database.getItems();
             });
          },

ItemWidget Looks like this
enter image description here

Tags:

2

Answers


  1. 0

    you can use this trick: by pop up a loading dialog

    /// create this function in your helper file
showLoaderDialogLoading(BuildContext context) {
  AlertDialog alert = AlertDialog(
    content: Row(
      children: [
        const CircularProgressIndicator(),
        Container(
            margin: const EdgeInsets.only(left: 7),
            child: const Text("Loading...")),
      ],
    ),
  );
  showDialog(
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

    and use it:

    onDeleteTap: () async {
   showLoaderDialogLoading(context);
   await Database.delete(snapshot.data[index]["_id"]);

   setState(() {
     data = Database.getItems();
   });
   // when its done, close the dialog
  
   Navigator.pop(context);
  // loading dialog will be closed 

},

    enter image description here

    Login or Signup to reply.
  2. 0

    First define new variable in your main class like this:

    int _selectedItem = -1;

    then add this variable in your ItemWidget’s onDeleteTap like this:

    onDeleteTap: () async {
    
    setState(() {
       _selectedItem = index; // add this
    }); 

    await Database.delete(snapshot.data[index]["_id"]);
    await Future.delayed(Duration(seconds: 3));

    setState(() {
       _selectedItem = -1; // add this
       data = Database.getItems();
    });
},

    then change your list view to this:

    itemBuilder: (BuildContext context, int index) {
    print(snapshot.data[index]);
    return Stack(
      children: [
        ItemWidget(
          ...
        ),
        _selectedItem == index
            ? Positioned(
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                child: Center(
                    child: LoadingAnimationWidget.staggeredDotsWave(
                        color: Colors.blueAccent, size: 50)))
            : SizedBox()
      ],
    );
}

    this will show a loading on specific item that you click.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search