FilePicker

A file picker that shows one directory at a time as a scrollable list and passes the file the user chooses to onSelect.

See also: FileBrowser to browse with filtering and copy.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

// In a terminal, FilePicker reads the local disk:
FilePicker(
  initialDirectory: Directory.current.path,
  filter: (entry) => entry.isDirectory || entry.name.endsWith('.dart'),
  onSelect: (file) => openFile(file.path),
)

// In the browser there is no disk to list, so pass a source, as this demo
// does:
FilePicker(
  source: MemoryFileSource([
    '/my_app/lib/app.dart',
    '/my_app/test/app_test.dart',
  ]),
  initialDirectory: '/my_app',
  onSelect: (file) => openFile(file.path),
)

Details

Up and Down move the cursor, wrapping at the ends, and Home and End jump. Enter, Right, or a click on a row opens a folder in place or chooses a file; on a link or other entry, they do nothing. Left or Backspace, or a click on the .. row, goes to the parent directory.

It lists directories from source: the local disk by default on native platforms. A browser embed passes one, such as a MemoryFileSource. It reads a directory when it opens one or is given a different source; filter and showHidden narrow what was read. Directory reads are synchronous — fine for a picker UI on local disks, but don’t point this at a slow network mount.

Constructors

FilePicker()

Parameter	Type	Default	Description
initialDirectory:	String	required	Directory the picker opens in. If it can’t be listed (missing or unreadable), the picker renders a dim error row instead of entries.
onSelect:	void Function(FileEntry file)	required	Called with the chosen file when the user presses Enter or Right on a file row, or clicks it. Directories open in place instead; links and other non-file entries do nothing.
source:	FileSource?	—	Where directories are read from. Defaults to the local disk on native platforms; in the browser, pass one, such as a MemoryFileSource. More
filter:	FileEntryFilter?	—	Optional predicate that hides entries: return false to skip one. It runs on the entries of the directory that pass the showHidden rule. Use it to filter by extension, hide build artifacts, and so on. More
showHidden:	bool	false	Whether to list hidden entries, such as dot-files. Defaults to false. Like a new filter, a change applies to the entries already read and keeps the cursor on its entry.
maxVisible:	int	12	Maximum rows shown at once; longer directories scroll within this height, keeping the cursor in view.
semanticLabel:	String	'Files'	Label exposed through the semantic app graph.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the picker requests focus when mounted.

• source: A different source object reads the current directory again, and the cursor stays on its entry if the new source lists it. Keep one source across rebuilds (create it outside build) so that a rebuild doesn’t read.
• filter: A different function applies at once to the entries already read, without reading the directory again, and the cursor stays on its entry while that is still shown. So a closure written inline in build is fine, and one that captures state, such as a “Dart files only” toggle, takes effect on the rebuild that changes it.

Source

FilePicker is defined in packages/fleury/lib/src/catalog/file_picker.dart.

Category: Inputs & controls · All widgets

Live demo

filepicker_example.dart

Restart Run Expand

Example · editable Revert Format

class _FilePickerExampleState extends State<_FilePickerExample> {
  // The browser has no disk to list, so this demo picks from a project held
  // in memory. In a terminal, leave out `source` to pick from the local disk.
  final _project = MemoryFileSource([
    '/my_app/README.md',
    '/my_app/pubspec.yaml',
    '/my_app/bin/run_app.dart',
    '/my_app/lib/app.dart',
    '/my_app/lib/src/status_panel.dart',
    '/my_app/lib/src/theme.dart',
    '/my_app/test/app_test.dart',
    '/my_app/web/main.dart',
  ]);
  String _status = 'Pick a Dart file';

  @override
  Widget build(BuildContext context) => Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(
        child: FilePicker(
          source: _project,
          initialDirectory: '/my_app',
          autofocus: true,
          maxVisible: 8,
          filter: (entry) => entry.isDirectory || entry.name.endsWith('.dart'),
          onSelect: (file) => setState(() => _status = 'picked ${file.path}'),
        ),
      ),
      Text(_status, style: const CellStyle(dim: true)),
    ],
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand