Flutter : How to use scope Model (or any state management package) with dynamic range slider? Edited

Question

I have an app need to use scope model as a simplest state management (may be),I have a dynamic range slider (inside loop) which received it values from database ,I want when I move any slide to use scope model for updating the value of moved slider (updating to the server and in the UI) ,as I am new to use scope model I need help for it. the class which receive value from server :

class Values {
   int id;
   double quantity ;
   Values(this.id , this.qantity);

future method :

List _values = [];
Future getValue() async{
  var url ="xxxxxx/api/quantities.php?id=$id";
  var response = await http.get(url);
  var data = jsonDecode(response.body);
  for (var x in data){
     Values myValue = Values(x['id'],x['quantity']);
     _values.add(myValue);
  }
  return _values;
}

the slider inside future builder using ListView builder :

ListView.builder(
     itemCount: snapshot.data.length,
     itemBuilder: (contect, index) {
        return Slider(
           max: 100,
           min: 0,
           value:snapshot.data[index].quantity,
           onChanged: (val) {
               //I need to use scope model state management here , but I don't know
           }
        );
})

every thing is went correctly just I don't know how to use state management here , how can I do that ,Best Regards

Answer 1

Use GetX because it is a simplified reactive state management solution.

The Code Will Be like this

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

class ValuesController extends GetxController {

  List<Values> values = new List<Values>().obs;
  void set(int id , double val) {

    this.values.forEach((element) {
      if(element.id == id)
        element.quantity =val;
    });

  }
  void setList(List<Values> values)
  {
    this.values = values;
  }

}

class Values {
  int id;
  double quantity;

  Values(this.id, this.quantity);

}

class state
{
  final Vcontroller = Get.put(ValuesController());
  get()
  {


    List<Values> _values = [];
    Future getValue() async{
      var url ="xxxxxx/api/quantities.php?id=$id";
      var response = await http.get(url);
      var data = jsonDecode(response.body);
      for (var x in data){
        Values myValue = Values(x['id'],x['quantity']);
        _values.add(myValue);
      }
      Vcontroller.setList(_values);
      return _values;
    }
  }

  final ValuesController Vctrl = Get.find();
  build()
  {


    return Obx(()=>F());

  }
  F()
  {
    List<Values> values = Vctrl.values;
    return  ListView.builder(
        itemCount: values.length,
        itemBuilder: (contect, index) {
          return Slider(
              max: 100,
              min: 0,
              value: values[index].quantity,
              onChanged: (val) {
                //I need to use scope model state management here , but I don't know
              }
          );
        });
  }
}