I want to make the list Reorderable in Flutter but I already have Future Builder and List View. ReorderableListView should be a parent or child of the other ListViews? How to initialize a key for the same?
return Scaffold(
body: Container(
child: ListView(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.882,
child: FutureBuilder(
future: databaseHelper.getNoteList(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Text('Loading');
} else {
if (snapshot.data.length < 1) {
return Center(
child: Text('No Messages, Create New one'),
);
}
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int i) {
return Column(
children: <Widget>[
ListTile(
title: Text(snapshot.data[i].title),
),
subtitle:
Text(snapshot.data[i].note, maxLines: 4),
onTap: () {},
),
Divider(color: Theme.of(context).accentColor)
],
);
},
);
}
},
),
)
],
),
),
);
I tried adding the ReorderableListView but since children: [] is not possible I don't know where to put a for loop for " i "
future: databaseHelper.getNoteList(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Text('Loading');
} else {
if (snapshot.data.length < 1) {
return Center(
child: Text('No Messages, Create New one'),
);
}
return ReorderableListView(
children: List.generate(
snapshot.data.length,
(index) {
return ListTile(
key: Key('$index'),
title: Text(
snapshot.data[i].title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
subtitle:
Text(snapshot.data[i].note, maxLines: 4),
trailing: InkWell(
child: Icon(Icons.check, color: Colors.green),
onTap: () {
TextEditingController txt =
TextEditingController();
txt.text = snapshot.data[i].note;
print(txt);
Route route = MaterialPageRoute(
builder: (context) =>
MyHomePage(custMessage: txt));
Navigator.push(context, route);
// addNewMessageDialog(txt);
},
),
isThreeLine: true,
onTap: () {
Route route = MaterialPageRoute(
builder: (context) => AddNote(
note: snapshot.data[i],
));
Navigator.push(context, route);
},
);
},
).toList()
//Divider(color: Theme.of(context).accentColor),
);
}
})```
Right now the error is undefined variable i.
I got the way how to solve it.
```Widget build(BuildContext context) {
databaseHelper.initlizeDatabase();
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text('Notes'),
),
body: Container(
padding: EdgeInsets.all(8.0),
child: ListView(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.882,
child: FutureBuilder(
future: databaseHelper.getNoteList(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Text('Loading');
} else {
if (snapshot.data.length < 1) {
return Center(
child: Text('No Messages, Create New one'),
);
}
return ReorderableListView(
children: List.generate(
snapshot.data.length,
(index) {
return ListTile(
key: Key('$index'),
title: Text(
snapshot.data[index].title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
subtitle: Text(snapshot.data[index].note,
maxLines: 4),
trailing: InkWell(
child: Icon(Icons.check,
color: Colors.green),
onTap: () {
TextEditingController txt =
TextEditingController();
txt.text = snapshot.data[index].note;
print(txt);
Route route = MaterialPageRoute(
builder: (context) =>
MyHomePage(custMessage: txt));
Navigator.push(context, route);
// addNewMessageDialog(txt);
},
),
isThreeLine: true,
onTap: () {
Route route = MaterialPageRoute(
builder: (context) => AddNote(
note: snapshot.data[index],
));
Navigator.push(context, route);
},
);
},
).toList(),
onReorder: (int oldIndex, int newIndex) {
setState(() {
if (newIndex > oldIndex) {
newIndex -= 1;
}
final item = snapshot.data.removeAt(oldIndex);
snapshot.data.insert(newIndex, item);
});
}
//Divider(color: Theme.of(context).accentColor),
);
}
}))
],
)),
floatingActionButton: _buildFAB(context, key: _fabKey),
);
}```
Basically, using List.generate and using index to iterate through the database elements. This way I can use future builder to display elements from database rather than a normal list and reorder that list.
future: databaseHelper.getNoteList(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Text('Loading');
} else {
if (snapshot.data.length < 1) {
return Center(
child: Text('No Messages, Create New one'),
);
}
return ReorderableListView(
children: List.generate(
snapshot.data.length,
(index) {
return ListTile(
key: Key('$index'),
title: Text(
snapshot.data[index].title,
),
),
subtitle: Text(snapshot.data[index].note,
maxLines: 4),
onTap: () {
},
),
onTap: () {
Route route = MaterialPageRoute(
builder: (context) => AddNote(
note: snapshot.data[index],
));
Navigator.push(context, route);
},
);
},
).toList(),
onReorder: (int oldIndex, int newIndex) {
setState(() {
if (newIndex > oldIndex) {
newIndex -= 1;
}
final item = snapshot.data.removeAt(oldIndex);
snapshot.data.insert(newIndex, item);
});
}