Can valueNotifier and CircularProgressIndicat may work "separately " for different ListTile in ListView?

Question

I have a problem with assigning/updating a single SimpleCircularProgressBar contained in a ListTile.

Hello, let me add at the first place that I am just a beginner in this topic. I am trying to get an effect where when I type a number in the (inputText) "valueNotifier.value" field it will change the "SimpleCircularProgressBar". However, every time I enter a new value all the "SimpleCircularProgressBar" in the "listTile update. Is it possible to achieve an effect where each field in the "ListTile" widget is "linked" to its "SimpleCircularProgressBar"?

my code:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';

class PlayerTile extends StatefulWidget {
  const PlayerTile({Key? key, required this.documents}) : super(key: key);

  final List<QueryDocumentSnapshot<Map<String, dynamic>>> documents;

  @override
  State<PlayerTile> createState() => _PlayerTileState();
}

late ValueNotifier<double> valueNotifier;

class _PlayerTileState extends State<PlayerTile> {
  @override
  void initState() {
    super.initState();

    valueNotifier = ValueNotifier(0.0);
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        for (final document in widget.documents) ...[
          ListTile(
            leading: SimpleCircularProgressBar(
              size: 50,
              progressStrokeWidth: 8,
              backStrokeWidth: 8,
              valueNotifier: valueNotifier,
              mergeMode: true,
              onGetText: (double value) {
                return Text(
                  '${value.toInt()}',
                  style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.normal,
                    color: Colors.white,
                  ),
                );
              },
            ),
            title: Text(
              document["gn"],
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            contentPadding: const EdgeInsets.all(10),
            subtitle: TextField(
              textAlign: TextAlign.center,
              keyboardType: TextInputType.number,
              keyboardAppearance: Brightness.dark,
              decoration: InputDecoration(
                filled: true,
                fillColor:
                    const Color.fromARGB(255, 190, 183, 183).withOpacity(0.4),
                hintText: 'Enter value (max 100)',
                hintStyle: TextStyle(color: Colors.black.withOpacity(0.9)),
              ),
      
              style: const TextStyle(fontSize: 25, color: Colors.white),
              onSubmitted: (inputText) {
                final double newValue = double.parse(inputText);
                valueNotifier.value = newValue;
              },
            ),
            trailing: const Icon(Icons.more_vert),
          ),
          const Divider(height: 0),
        ],
      ],
    );
  }
}

the effect it receives :enter image description here

Answer 1

seems like You just need to associate a unique ValueNotifier() to each document, maybe You can map the documents into Your own data structure where you can have the data from the document and a valueNotifier, then You will end up with a list of said structure:

[{ data: document, valueNotifier: ValueNotifier(0.0) },{ data: document, valueNotifier: ValueNotifier(0.0) }, { etc.. }]

then you just reference each elements value notifier.

hope this helps.