Please help, I am trying to get a single individual item count increment on its button press within the listView using Getx as state manager.

This is the code i have tried, but it has failed. i also tried getting the index of each list item but could not figure out how to increment the count of individual list items on button press.

// Main.dart
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final WordsController _controller = Get.put(WordsController());
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home Page"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _controller.add_word();
        },
      ),
      body: Obx(
        () => ListView.builder(
          itemCount: _controller.words.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_controller.words[index]),
              trailing: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  _controller.add_count_to_item();
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

// My Controller

class WordsController extends GetxController {
  var words = [].obs;
  var number = 0.obs;

  @override
  void onInit() {
    add_word();
    super.onInit();
  }

  void add_word() {
    words.add("Hello $number");
  }

  void add_count_to_item() {
    number  = 1;
  }
}

CodePudding user response：

Not sure what you want to achive, but take a look at this :

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class MyHomePage extends GetView<WordsController> {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Home Page")),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () => controller.addWord(),
      ),
      body: GetBuilder<WordsController>(
        init: WordsController(),
        builder: (controller) => ListView.builder(
          itemCount: controller.words.length,
          padding: const EdgeInsets.all(20),
          itemBuilder: (context, index) {
            final item = controller.words[index];
            return Row(
              children: [
                IconButton(
                  icon: const Icon(Icons.clear, color: Colors.red),
                  onPressed: () {
                    controller.words.removeAt(index);
                    controller.update();
                  },
                ),
                Text('${item.text} ${item.value}'),
                const Spacer(),
                IconButton(
                  icon: const Icon(Icons.remove, color: Colors.red),
                  onPressed: () {
                    item.value--;
                    controller.update();
                  },
                ),
                IconButton(
                  icon: const Icon(Icons.add, color: Colors.blue),
                  onPressed: () {
                    item.value  ;
                    controller.update();
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

class WordsController extends GetxController {
  var words = <SimpleModel>[].obs;

  @override
  void onInit() {
    addWord();
    super.onInit();
  }

  void addWord() {
    words.add(SimpleModel(text: "Hello", value: 0));
    update();
  }
}

class SimpleModel {
  String text;
  int value;

  SimpleModel({
    required this.text,
    required this.value,
  });
}

I also added some function that maybe you needed.
Check this demo :