ReorderableSliverList with Futurebuilder

Question

I'm trying to populate a ReorderableSliverList with data from an API using FutureBuilder.

Model (RouteOrderTable)

 RouteOrderTable(
      {required this.deliveryPeriod,
      required this.driverId,
      required this.processId,
      required this.routeId,
      required this.routeLines,
      required this.status,
      required this.vanId});


  RouteOrderTable.fromJson(Map<String, dynamic> json) {
    deliveryPeriod = json['deliveryPeriod'];
    driverId = json['driverId'];
    processId = json['processId'];
    routeId = json['routeId'];
    if (json['routeLines'] != null) {
      routeLines = <RouteOrderLine>[];
      json['routeLines'].forEach((v) {
        routeLines!.add(new RouteOrderLine.fromJson(v));
      });
    }
    status = json['status'];
    vanId = json['vanId'];
  }

Model (RouteOrderLine)

  RouteOrderLine(
      {required this.city,
      required this.custAccount,
      required this.custName,
      required this.invoiceId,
      required this.deliveryDate,
      required this.productType,
      required this.routeId,
      required this.salesId,
      required this.volume,
      required this.weight});

  RouteOrderLine.fromJson(Map<String, dynamic> json) {
    city = json['city'];
    custAccount = json['custAccount'];
    custName = json['custName'];
    deliveryDate = DateTime.tryParse(json['deliveryDate']);
    invoiceId = json['invoiceId'];
    productType = json['productType'];
    routeId = json['routeId'];
    salesId = json['salesId'];
    volume = json['volume'];
    weight = json['weight'];
  }

JSON Data

[
    {
        "deliveryPeriod": 1,
        "driverId": "",
        "processId": "PRO000475",
        "routeId": "ROU001804",
        "routeLines": [
            {
                "city": "Naxxar",
                "custAccount": "CUST010917",
                "custName": "",
                "deliveryDate": "2021-07-06T12:00:00",
                "invoiceId": "",
                "productType": 0,
                "routeId": "ROU001804",
                "salesId": "SO002496",
                "volume": 0.011113889,
                "weight": 8.700435
            }
        ],
        "status": 10,
        "vanId": "TFI 943"
    },
    {
        "deliveryPeriod": 2,
        "driverId": "",
        "processId": "PRO000475",
        "routeId": "ROU001805",
        "routeLines": [
            {
                "city": "Birkirkara",
                "custAccount": "CUST010916",
                "custName": "",
                "deliveryDate": "2021-07-06T12:00:00",
                "invoiceId": "",
                "productType": 0,
                "routeId": "ROU001805",
                "salesId": "SO002497",
                "volume": 0.005556111,
                "weight": 4.349565
            }
        ],
        "status": 30,
        "vanId": "HBA 804"
    }
]

Screen - One of the issues here is that I cannot use removeAt() and insert() for the onReorder() because they aren't defined for the type Future.

class _SliverScreenState extends State<SliverScreenState> {
  late Future<List<RouteOrderTable>> futureRouteTable;

  @override
  void initState() {
    super.initState();
    futureRouteTable = fetchData();
  }

  @override
  Widget build(BuildContext context) {
    void _onReorder(int oldIndex, int newIndex) {
    /*   setState(() {
        Widget row = futureRouteTable!.removeAt(oldIndex);
        futureRouteTable.insert(newIndex, row);
      });*/
    }

    ScrollController _scrollController =
        PrimaryScrollController.of(context) ?? ScrollController();
    final someOtherSliver = SliverToBoxAdapter();

    return  FutureBuilder<List<RouteOrderTable>>(
        future: futureRouteTable,
        builder: (context, snapshot) {

    Widget routeOrderListSliver;
    final List<RouteOrderTable>? posts = snapshot.data;
    if (snapshot.hasData) {
      routeOrderListSliver = CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverAppBar(
            flexibleSpace: FlexibleSpaceBar(
              title: Text('ROUTE NO'),
            ),
          ),
          ReorderableSliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text(posts![index].routeId.toString(),
                style: TextStyle(fontSize: 20.0),),
              ),
          childCount: posts!.length,
          ),
        onReorder: _onReorder,
        ),
      ],
    );
    }else {
    routeOrderListSliver = Center(child: SliverToBoxAdapter(child: CircularProgressIndicator(),));
    }

    return CustomScrollView(
    slivers: <Widget>[
      someOtherSliver,
    routeOrderListSliver
    ],
    );
    },
          );
  }
}

FetchData

Future<List<RouteOrderTable>> fetchData() async {
  final response =
      await http.get(Uri.parse('https://10.0.2.2:7038/api/route/1?siteId=1'));

  try {
    if (response.statusCode == 200) {

      List<RouteOrderTable> lstRouteOrderTable = [];

      Iterable l = jsonDecode(response.body);
      lstRouteOrderTable = List<RouteOrderTable>.from(l.map((model) => RouteOrderTable.fromJson(model)));
      return lstRouteOrderTable;
    } else {

      throw Exception('Failed to load route');
    }
  } catch (e) {
    print(e);
  }
  return new List<RouteOrderTable>.empty();
}

ListView.builder

ListView _buildRouteOrderTable(
    BuildContext context, List<RouteOrderTable>? lstRouteTable) {
  return ListView.builder(
    itemCount: lstRouteTable == null ? 0 : lstRouteTable.length,
    //padding: EdgeInsets.all(8),
    itemBuilder: (context, index) {
      return Card(
        elevation: 4,
        child: ListTile(
          title: Text(
            lstRouteTable == null ? "" : lstRouteTable[index].routeId.toString(),
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: Text(
              lstRouteTable == null ? "" : lstRouteTable[index].processId.toString()),
        ),
      );
    },
  );
}

Answer 1

You can define the _onReorder function inside the FutureBuilder and then use the snapshot to create a variable of RouteOrderTable.

This will give you access to the removeAt & insert functions.

There are two ways of doing this.

final List<RouteOrderTable>? posts = snapshot.data;

if (snapshot.hasData) {

  void _onReorder(int oldIndex, int newIndex){
    //1. Define the function here and then pass it as a parameter.
  }

  routeOrderListSliver = CustomScrollView(
    controller: _scrollController,
    slivers: <Widget>[
      SliverAppBar(
        flexibleSpace: FlexibleSpaceBar(
          title: Text('ROUTE NO'),
        ),
      ),
      ReorderableSliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) => ListTile(
            title: Text(posts![index].routeId.toString(),
            style: TextStyle(fontSize: 20.0),),
          ),
      childCount: posts!.length,
      ),
    onReorder: (int oldIndex, int newIndex){
       
       // OR
       // 2. You can directly create the function here.

      },
    ),
  ],
);
}

Both ways, you get access to the posts variable where you can do your operations.