Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to show loading indicator on only one list item in Flutter?

I have a list of items with buttons. By clicking on one element on the button, I get a CircularProgressIndicator. I ran into a problem that when I click on one card per button, I get a loading indicator on all cards. How can I make the loading indicator appear on only one card that I click on?

bool isApprovedLoading = false;

return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 25),
      child: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        child: Padding(
          padding: const EdgeInsets.only(top: 10, bottom: 18),
          child: ListView.builder(
                  physics: const BouncingScrollPhysics(),
                  itemCount: list.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: const EdgeInsets.only(bottom: 16),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(16),
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaX: 7.0, sigmaY: 7.0),
                          child: Container(
                            height: 152,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(16),
                              color:
                                  constants.Colors.greyXDark.withOpacity(0.8),
                            ),
                            child: Row(
                              children: [
                                          Expanded(
                                            child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                isApprovedLoading
                                                    ? const CircularProgressIndicator(
                                                        color: constants
                                                            .Colors.purpleMain)
                                                    : OrderButton(
                                                        text: 'Approved',
                                                        svgIcon:
                                                            SvgPicture.asset(
                                                                constants.Assets
                                                                    .enable,
                                                                color: constants
                                                                    .Colors
                                                                    .purpleMain),
                                                        textStyle: const TextStyle(
                                                            fontFamily: constants
                                                                .FontFamily
                                                                .AvenirLtStd,
                                                            fontSize: 12,
                                                            fontWeight:
                                                                FontWeight.w800,
                                                            color: constants
                                                                .Colors
                                                                .purpleMain),
                                                        borderColor: constants
                                                            .Colors.purpleMain,
                                                        buttonColor: constants
                                                            .Colors.greyXDark
                                                            .withOpacity(0.5),
                                                        onTap: () {
                                                          setState(() {
                                                            isApprovedLoading =
                                                                true;
                                                          });
                                                          _confirmOrder(
                                                            context,
                                                            list[index].id,
                                                            poyntBookingsCubit,
                                                            user,
                                                          );
                                                        },
                                                      ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                )
        ),
      ),
    );

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

you need define new variable like:

int selectedItem = -1;

and change your asdasd to this:

onTap: () {
          setState(() {
            isApprovedLoading = true;
            selectedItem = index;
          });
          _confirmOrder(
            context,
            list[index].id,
            poyntBookingsCubit,
            user,
          );
        },

then use it like this:

isApprovedLoading && selectedItem == index
              ? const CircularProgressIndicator(
                  color: constants.Colors.purpleMain)
              : OrderButton(...),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading