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

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

CodePudding user response：

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(...),