CODEWITHSUNDEEP
flutterdartflutter-listviewflutter-futurebuilder
BeneKunz
BeneKunz

Reputation: 43

Reorderable ListView with future builder in Flutter

I am trying to implement a Reorderable ListView into a FutureBuilder but currently I'm running into an error and got no idea what this means. My future Widget 'WidgetLook' already got a key assigned to it.

Here is my Future Builder code:

child: FutureBuilder(
  future: getClassList(),
  builder: (BuildContext context, AsyncSnapshot<List> snapchot) {
    if (snapchot.hasData) {
      return ReorderableListView(
        onReorder: _onReorder,
        children: getList(snapchot.data),
      );
    } else
      return CircularProgressIndicator();
  }
)

The "getClassList" function looks like this:

Future<List> getClassList() async {
  final response = await http.get('http://.../classtitle');
  final decoded = json.decode(response.body) as Map<String, dynamic>;
  List classtitlesList = decoded['ClassTitles'];
  return classtitlesList;
}

The "getList" function looks like this:

List<Widget> getList(text) {
  list = [];
  for (int i = 0; i < text.length; i++) {
    list.add(WidgetLook(title: text[i], number: i));
  }
  return list;
}

The Widget itself looks like this:

class WidgetLook extends StatelessWidget {
  final String title;
  final number;
  WidgetLook({this.title, this.number});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      key: ValueKey(title),
      onTap: () async {...
      },
      child: Container(...
        child: Align(...
        ),
      ),
    );
  }
}

The error message is this:

All children of this widget must have a key.
'package:flutter/src/material/reorderable_list.dart':
Failed assertion: line 75 pos 10: 'children.every((Widget w) => w.key != null)'

The relevant error-causing widget was
FutureBuilder<List<dynamic>>

Why does this error appears because I already got a key assigned to my widget?

Upvotes: 2

Views: 762

Answers (1)

Ayad
Ayad

Reputation: 691

You need to add a key to the items in your widget list. So you should add the key in your widget:

class WidgetLook extends StatelessWidget {
  final String title;
  final number;

  const WidgetLook({Key key, this.title, this.number}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      key: ValueKey(title),
      onTap: () async {
      },
      child: Container(
      child: Align(
      ),
    ),
    );
  }
}

Now you should add the key value to the widget in your list:

List<Widget> getList(text) {
  list = [];
  for (int i = 0; i < text.length; i++) {
    list.add(WidgetLook(key: ValueKey(i), title: text[i], number: i));
  }
  return list;
}

Upvotes: 1

Related Questions