Saving Data in Flutter

Let’s get to the design of our screen. In the build method, instead of the Placeholder, let’s return a Scaffold. In its appbar, let’s show a title with a Text widget containing the name of the list:

appBar: AppBar(title: Text(_listName)), 

Now in the body, let’s return a FutureBuilder, that waits for the get_files method and fills a ListView with all the files in the app’s documents directory.

So in the body of the Scaffold, let’s return a FUtureBuilder, of type List of FileSystemEntity. Let’s also add the required import for this.

The future of the futureBuilder calls the getFiles method. Next let’s add the builder that will take care of the UI.

body: FutureBuilder<List<FileSystemEntity>>( 
  future: _getFiles(), 
  builder:(context, snapshot) { 
  }, 
) 

Until the future has finished retrieving the list of files, we want to show a CircularProgressIndicator. We know we are still waiting for the results of the future with the snapShot connectionState property. So if the snapshot.connectionstate is connectionstate.waiting, then let’s return a Center widget containing a CircularProgressIndicator.

if (snapshot.connectionState == ConnectionState.waiting) { 
  return const Center(child: CircularProgressIndicator()); 
} 

Let’s also deal with the future returning an error: if the snapshot.hasError is true, then we’ll return a center widget containing a text with the error itself.

return Center(child: Text('Error: ${snapshot.error}')); 

Finally, when the future completes successfully, let’s return a listView, through its builder constructor: for the itemCount parameter, let’s count the length of the snapShot data, or 0 if it’s null (which is supposed to never happen actually, but better safe than sorry).

In the itemBuilder, let’s take each file in the list. So it will be a final file = snapshot.data![index] as File;

With the file, let’s retrieve the last day it was modified, with final date = file.lastModifiedSync();

As this is a date, let’s change its format into a string (we can call this dateString), and let’s make an interpolation that takes the date year, the month, and the day,

final dateString = '${date.year}-${date.month}-${date.day}'; 

Then, let’s retrieve the size of the file: we can use the lengthSync method to do that

final size = file.lengthSync(); 

And finally let’s build a string that contains the data we want to show after the file name. THis depends on the settings. Let’s set it to an empty string first. Then if _showSize is true, let’s concatenate a string containing ‘File size: ${size.toString()}’.

Let’s repeat this for the date: if showDate is true, let’s add ‘Last modified: $dateString’

var subtitle = ''; 
if (_showSize) subtitle +=  'File size: ${size.toString()}'; 
if (_showDate) subtitle +=  'Last modified: $dateString'; 
return ListTile( 
  title: Text(file.path.split('/').last), 
  subtitle: Text(subTitle), 
  onTap: () {} 
); 

Next, let’s return a ListTile.
Its title will be the name of the file, so we’ll take the last part of the path, that follows the last slash. The Subtitle contains a Text with the subtitle string we have built.

To check the app up to this point, let’s make a small change into the main.dart file: in the home of the MaterialApp in the build method, let0s call FileListScreen and run the app!

Of course no files appears in the list, as we haven’t saved any file yet, but if you can compile the app and no errors show up, this is already a good start.

Ok, we definitely need a screen to write a new file. Let’s do that next!