Change icon when clicking on the corresponding card in the list Flutter-CodePudding

I want to make it so that when you click on the icon (which is on the card), another icon changes. But so that all the icons throughout the list do not change (as I did), but only the icon in the corresponding card. In the future, the request will be taken from the API, but now for the test I created a data sheet. Tell me how to implement it correctly?

final List<String> list = [
    "Eli's Poynt AC",
    "Eli's Poynt Home DC",
  ];

  bool isSettings = false;
    
ListView.builder(
              shrinkWrap: true,
              itemCount: list.length   1,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Container(
                    height: 112,
                    padding:
                        const EdgeInsets.symmetric(horizontal: 21, vertical: 16),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: constants.Colors.greyDark,
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          height: 80,
                          width: 80,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: Image.asset('assets/images/poynt.jpg'),
                          ),
                        ),
                        const SizedBox(width: 15),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                list[index],
                                style: constants.Styles.normalHeavyTextStyleWhite,
                              ),
                              const SizedBox(height: 6),
                              const Text(
                                'Evan Gbirol St, 18',
                                style: constants.Styles.smallBookTextStyleWhite,
                              ),
                            ],
                          ),
                        ),
                        SvgPicture.asset(constants.Assets.poynt1),
                        const SizedBox(width: 20),
                        IconButton(
                          onPressed: () {
                            
                            setState(() {
                              isSettings = !isSettings;
                            });
                          },
                          icon: isSettings
                              ? SvgPicture.asset(constants.Assets.remove2)
                              : SvgPicture.asset(constants.Assets.threeDot),
                          padding: EdgeInsets.zero,
                          constraints: const BoxConstraints(),
                        ),

CodePudding user response：

You need to create a list of bool that contains isSetting variables for each item;

final List<String> list = [
    "Eli's Poynt AC",
    "Eli's Poynt Home DC",
  ];

List<bool> isSettings = [];
    
ListView.builder(
              shrinkWrap: true,
              itemCount: list.length   1,
              itemBuilder: (context, index) {
                isSettings.add(false);
                return Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Container(
                    height: 112,
                    padding:
                        const EdgeInsets.symmetric(horizontal: 21, vertical: 16),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: constants.Colors.greyDark,
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          height: 80,
                          width: 80,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: Image.asset('assets/images/poynt.jpg'),
                          ),
                        ),
                        const SizedBox(width: 15),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                list[index],
                                style: constants.Styles.normalHeavyTextStyleWhite,
                              ),
                              const SizedBox(height: 6),
                              const Text(
                                'Evan Gbirol St, 18',
                                style: constants.Styles.smallBookTextStyleWhite,
                              ),
                            ],
                          ),
                        ),
                        SvgPicture.asset(constants.Assets.poynt1),
                        const SizedBox(width: 20),
                        IconButton(
                          onPressed: () {
                            setState(() {
                              isSettings[index] = !isSettings[index];
                            });
                          },
                          icon: isSettings[index]
                              ? SvgPicture.asset(constants.Assets.remove2)
                              : SvgPicture.asset(constants.Assets.threeDot),
                          padding: EdgeInsets.zero,
                          constraints: const BoxConstraints(),
                        ),

CodePudding user response：

Extract your Container inside the ListView as a new widget into a new stateful class and call that class inside the ListView.