How to update only one widget in a ListView in Flutter when its data changes?

Question

class ListNumbersPage extends GetView<MyController> {
  final colors = [
    Colors.red,
    Colors.green,
    Colors.pinkAccent,
    Colors.blue,
    Colors.grey,
    Colors.cyan,
  ];
  final random = Random();

  @override
  Widget build(BuildContext context) {
    Get.put(MyController());

    return Scaffold(
      appBar: AppBar(title: const Text('ListNumbersPage')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: controller.listOfFiles.length,
              itemBuilder: (_, index) {
                final currentFile = controller.listOfFiles[index];
                return Container(
                  padding: const EdgeInsets.symmetric(vertical: 32),
                  color: colors[random.nextInt(colors.length)],
                  child: Row(
                    children: [
                      Obx(
                        () {
                          MyLogs.warning('UPDATED INDEX : $index');
                          return MyIconButton(
                            onTap: () {
                              doLike(controller.listOfSelection ?? [], currentFile.value.fileId, index);
                            },
                            iconData: FontAwesomeIcons.solidHeart,
                            color: isExist(controller.listOfSelection ?? [], currentFile.value.fileId, index)
                                ? isLiked(controller.listOfSelection ?? [], currentFile.value.fileId)
                                    ? AppColor.redDark
                                    : AppColor.white
                                : AppColor.white,
                          );
                        },
                      ),
                      Text(controller.listOfFiles[index].value.fileId),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

bool isExist(List<Rx<LikeModel>> listOfSelection, String fileId, int index) {
  try {
    if (listOfSelection.length >= index) {
      final item = listOfSelection.firstWhereOrNull((e) => e.value.fileId == fileId);
      return item != null;
    } else {
      return false;
    }
  } catch (e) {
    MyLogs.debug(e.toString());
    return false;
  }
}

bool isLiked(List<Rx<LikeModel>> listOfSelection, String fileId) {
  try {
    return listOfSelection.firstWhere((e) => e.value.fileId == fileId).value.isLiked;
  } catch (e) {
    MyLogs.debug(e.toString());
    return false;
  }
}

void doLike(List<Rx<LikeModel>> listOfSelection, String fileId, int index) {
  try {
    final item = listOfSelection.firstWhere((element) => element.value.fileId == fileId);
    final index = listOfSelection.indexOf(item);
    final isLiked = item.value.isLiked;

    listOfSelection[index].value = item.value.copyWith(
      isLiked: !isLiked,
    );
  } catch (e) {
    MyLogs.debug(e.toString());
  }
}

class MyController extends GetxController {
  final listOfFiles = [
    "IMAGE001",
    "IMAGE002",
    "IMAGE003",
    "IMAGE004",
    "IMAGE005",
    "IMAGE006",
    "IMAGE007",
    "IMAGE008",
    "IMAGE009",
    "IMAGE010",
  ].map((e) => LikeModel(e, false).obs).toList();

  List<Rx<LikeModel>>? listOfSelection;

  @override
  void onInit() {
    listOfSelection = listOfFiles;
    super.onInit();
  }
}

class LikeModel {
  String fileId;
  bool isLiked;

  LikeModel(this.fileId, this.isLiked);

  LikeModel copyWith({
    String? fileId,
    bool? isLik
  }) {
    return LikeModel(
      fileId ?? this.fileId,
      isLiked ?? this.isLiked,
    );
  }
}

I'm facing an issue in my Flutter app where I have a ListView displaying a list of items, each item containing a like button. The problem arises when I press the like button for a specific item – instead of updating only that particular like button, the entire ListView gets rebuilt, causing performance overhead.

What I want to achieve is to update only the specific like button widget whose data (like status) has changed, without affecting the rest of the list items.

I've tried using various state management techniques such as Obx, GetBuilder, and even experimented with Provider, but none seem to provide a solution that updates only the targeted widget.

Could someone please guide me on how to efficiently update just the relevant widget in the ListView when its associated data changes? Any insights, code snippets, or examples would be highly appreciated.

Thank you!

Pankaj Kumar Tungaria · Accepted Answer · 2024-06-14 07:13:40Z

I have solved the issue by creating a separate StatefulWidget and removing obx for the like button. It manages state locally using setState to ensure only the clicked widget updates.

class LikeButtonWidget extends StatefulWidget {
  final Rx<LikeModel> currentFile;

  LikeButtonWidget({required this.currentFile});

  @override
  _LikeButtonWidgetState createState() => _LikeButtonWidgetState();
}

class _LikeButtonWidgetState extends State<LikeButtonWidget> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () {
        setState(() {
          widget.currentFile.value = widget.currentFile.value.copyWith(isLiked: !widget.currentFile.value.isLiked);
        });
      },
      icon: Icon(FontAwesomeIcons.solidHeart, color: widget.currentFile.value.isLiked ? AppColor.redDark : AppColor.white),
    );
  }
}

FrankAi · Accepted Answer · 2024-05-14 07:45:03Z

If I understand correctly, your widgets get a new state by changing "MyController."

If there's a way to do what you need without constantly setting a new state to MyController, you could put this code inside a stateful widget. Then you could do your stuff there, and when you're done and want to set a new state, update your controller. Then the whole ListView is rebuilt only once.

Container(
  padding: const EdgeInsets.symmetric(vertical: 32),
  color: colors[random.nextInt(colors.length)],
  child: Row(
    children: [
      Obx(
        () {
          MyLogs.warning('UPDATED INDEX : $index');
          return MyIconButton(
            onTap: () {
              doLike(controller.listOfSelection ?? [], currentFile.value.fileId, index);
            },
            iconData: FontAwesomeIcons.solidHeart,
            color: isExist(controller.listOfSelection ?? [], currentFile.value.fileId, index)
                ? isLiked(controller.listOfSelection ?? [], currentFile.value.fileId)
                    ? AppColor.redDark
                    : AppColor.white
                : AppColor.white,
          );
        },
      ),
      Text(controller.listOfFiles[index].value.fileId),
    ],
  ),
);

Collectives™ on Stack Overflow

How to update only one widget in a ListView in Flutter when its data changes?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related