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

Question

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

Answer 1

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