Advanced Pickers

1. Requirements Document

Overview

Complex input components that require overlay dialogs or system integrations to select data types like Dates, Times, Files, and Colors.

Functional Requirements

  1. File Picker:
    • Single vs Multi-select.
    • Extension filtering (e.g., only .pdf, .jpg).
    • Max size limits.
  2. Date/Time Picker:
    • Range selection vs Single date.
    • Min/Max date constraints.
    • Localization support.
  3. Color Picker:
    • Palette selection vs HSV/RGB sliders.

Non-Functional Requirements

  • Platform Native: Should use native pickers (iOS/Android) where appropriate for familiarity, or fallback to custom responsive UI for Web/Desktop.

2. Technical Document

Architecture

System Architecture

Advanced pickers abstract the complexities of native platform interactions. The Picker Logic handles permissions, configuration normalization, and mapping diverse native results into a unified Dart object.

API Design

File Picker Configuration

Using sealed classes to distinguish between picker modes.

sealed class FilePickerConfig {}
 
class SingleFileConfig extends FilePickerConfig {
    final List<String> allowedExtensions;
    final int maxSizeMb;
}
 
class MultiFileConfig extends FilePickerConfig {
    final int maxFiles;
    // ...
}

Usage

MyFilePicker(
    config: SingleFileConfig(
        allowedExtensions: ['jpg', 'png'],
        maxSizeMb: 5,
    ),
    onResult: (file) => upload(file),
)

Internal Logic

  • File Picker: Wraps file_picker package or platform channels. Handles permission requests automatically (Storage/Photo Library).
  • Abstractions: Returns a unified PlatformFile object regardless of OS, containing bytes, path, and metadata.