lundi 5 août 2019

Flutter Refresh Futurebuilder and Listview.builder

So I have a Futurebuilder containing a Listview.builder. This is a checklist. Every object is a container with a row that has a CheckBox and a String that is taken from the Django rest api. Here is the structure of the api:

class Checker {
  final int id;
  final String name;
  final bool checked;
  final int sender;
  final dynamic sender_obj;
  final List canview;
  final List canview_obj;


  Checker(this.id, this.name, this.checked, this.sender, this.sender_obj, this.canview, this.canview_obj);

  Checker.fromJson(Map<String, dynamic> j)
      : id = j['id'],
        name = j['name'],
        checked = j['checked'],
        sender = j['sender'],
        sender_obj = j['sender_obj'],
        canview = j['canview'],
        canview_obj = j['canview_obj'];
}

Also here is the Future> Function that I call to get the data from the api (This is the future: ____ inside Futurebuilder, Note that this is an authenticated request via bearer token that is accessed on login to the app. Therefore the bearer token in the request):

  Future<List<Checker>> _getCheckerData() async {
    var requestHeaders = {HttpHeaders.authorizationHeader: "Bearer $bearer"};
    http.Response data = await http.get('http://localhost:8000/api/checkers/?task=$id', headers: requestHeaders);
    List jsonData = json.decode(data.body);
    List<Checker> allCheckers = jsonData.map<Checker>((j) => Checker.fromJson(j)).toList();
    return allCheckers;
  }

Finally The Futurebuilder that returns the containers with the checkboxes and names. Note that the checkboxes can be True or False. That is taken from the apis 'checked' object! Here is the code:

        Container(
          child: FutureBuilder(
            future: _getCheckerData(),
            builder: (context, snapshot) {
              if(snapshot.data != null) {
                return ColumnBuilder(
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  print(snapshot.data);
                  return Container(
                    margin: EdgeInsets.only(left: 4),
                    child: Row(
                      children: <Widget>[
                        Checkbox(value: snapshot.data[index].checked, onChanged: null),
                    Container(
                      margin: EdgeInsets.only(left: 0),
                      alignment: Alignment.centerLeft,
                      child: Text(snapshot.data[index].name),
                    )
                      ],
                    ),
                  );
                }
              );}
              else return Container();
            }
          ),
        ),

This is an image of the Checklist

What I want to happen when I press a checkbox. Is for the app to make a PUT request to the api, then reloading the future builder and list view.builder to get the data. Note that I need to do things this way because other users will need to see it!




Aucun commentaire:

Enregistrer un commentaire