How to get use a list from future and use it inside a listView - asynchronous

Question

I'm trying to get a list of all files in a certain directory.
I get the files from a future function called getUserVideos() if inside the function I try to printu the data, I can see the result, but I can't use the data outside the function.
class _mediaUtentiState extends State<mediaUtenti> {
var lightBlue = Color.fromRGBO(0, 197, 205, 1.0);
var _imagesDir;
#override
void initState() {
super.initState();
getUsersVideos();
}
List<String> Names = [
'Abhishek',
'John',
'Robert',
'Shyam',
'Sita',
'Gita',
'Nitish'
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: lightBlue,
appBar: new AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(padding: const EdgeInsets.all(8.0), child: Text('Nome')),
Container(
child: CircleAvatar(
backgroundImage: NetworkImage('http://i.pravatar.cc/300'),
),
),
],
),
backgroundColor: purple,
),
body: new Container(
child: new ListView.builder(
reverse: false,
itemBuilder: (_, int index) => EachList(this.Names[index]),
itemCount: this.Names.length,
),
),
);
}
Future<String> getUsersVideos() async {
print('something');
final Directory extDir = await getExternalStorageDirectory();
final String dirPath = '${extDir.path}/Movies/Veople';
final myDir = new Directory(dirPath);
List<FileSystemEntity> _images;
_images = myDir.listSync(recursive: true, followLinks: false);
print(_images.length);
_imagesDir = _images;
}
}
class EachList extends StatelessWidget {
final String name;
EachList(this.name);
#override
Widget build(BuildContext context) {
return new Card(
child: new Container(
padding: EdgeInsets.all(8.0),
child: new Row(
children: <Widget>[
new CircleAvatar(
child: new Text(name[0]),
),
new Padding(padding: EdgeInsets.only(right: 10.0)),
new Text(
name,
style: TextStyle(fontSize: 20.0),
)
],
),
),
);
}
}
for now I just show a list of names, but I want to show a card for each file in the path.
for example, in the function getUserVideos() whe I try to print imagesDir I get the right result [File: '/storage/emulated/0/Movies/Veople/1556217605345.mp4', File: '/storage/emulated/0/Movies/Veople/1556217605345.png', File: '/storage/emulated/0/Movies/Veople/1556217632709.mp4', File:
...]
But I cannot in any way access _imageDir out of that function.
I'm sure that is it possible to solve this problem with few lines, but right now it's 3 hours and I can't get a solution.
Thankyou!

Answer 1

I thought that for sure this would have already been answered, but while there's a lot of questions about FutureBuilder and Lists, none are quite like this or haven't really been answered adequately.
This is how I'd do it:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
Future<List<FileSystemEntity>> _getUsersVideos() async {
print('something');
final Directory extDir = await getExternalStorageDirectory();
final String dirPath = '${extDir.path}/Movies/Veople';
final myDir = new Directory(dirPath);
List<FileSystemEntity> _images = myDir.listSync(recursive: true, followLinks: false);
return _images;
}
class ListFromFuture extends StatefulWidget {
#override
_ListFromFutureState createState() => _ListFromFutureState();
}
class _ListFromFutureState extends State<ListFromFuture> {
Future<List<FileSystemEntity>> future;
#override
void initState() {
super.initState();
future = _getUsersVideos();
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: future,
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
case ConnectionState.active:
return Container(
alignment: Alignment.center,
child: Text("Loading"),
);
break;
case ConnectionState.done:
if (snapshot.hasError) {
// return whatever you'd do for this case, probably an error
return Container(
alignment: Alignment.center,
child: Text("Error: ${snapshot.error}"),
);
}
var data = snapshot.data;
return new ListView.builder(
reverse: false,
itemBuilder: (_, int index) => EachList(data[index]),
itemCount: data.length,
);
break;
}
},
);
}
}
The important parts of this are that:
future is only set it initState, not the build function. This makes sure that it isn't called each time the widget builds
I handle all of the cases where either there's an error or the future hasn't completed yet.
To be honest though, your example is actually very close to getting it working. All you'd have to do is wrap the line where you set _imagesDir = images in a setState(() => ...) and it should work (assuming the list doesn't return empty). You should also be checking for _imagesDir == null though, otherwise you might get null pointer exceptions.