unacorbatanegra / tie_picker

Minimal Picker, Filter, Date, Time

Tie Picker

Tie picker is a minimalist opinionated helper for custom selectors and Calendar that support Theme Colors (only light mode supported right now) and internationalization.

Index

• Calendar
• TimePicker
• ModalPicker
• MiniPicker

Using TiePicker

1. Install

2. To support internationalization add the following to your MaterialApp

    import 'package:tie_picker/tie_picker.dart';

MaterialApp(
    locale: const Locale('en'),
    /// Add the supported locales
    supportedLocales: TiePickerLocalizations.supportedLocales,
    localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        /// Add the localizations delegate
        TiePickerLocalizations.delegate
    ],
);

Calendar

To use the calendar pass the actual Date on the Date argument. Localizations are used and required to have a proper format for the dates.

You can set the selector from one of the following modes:

enum CalendarMode {
  day,
  month,
  year,
}

Usage:

date = await ModalPicker.datePicker(
    context: context,
    date: date,
    mode: CalendarMode.day,
);

Showcase:

TimePicker

The time picker follows the same principle that the Calendar. You can pass the currentTime as argument and it returns the new selected time. 24hs format is configurable.

Usage:

void openTimePicker() async {
    date = await ModalPicker.timePicker(
        context: context,
        date: date,
        use24hFormat: false,
    );
}

Showcase:

ModalPicker

The modal picker accepts any List<T> argument with any T argument using the equality of the hashes for comparing the data.

Example:

class MyClass {
  final int id;
  final String value;

  MyClass({
    required this.id,
    required this.value,
  });

  @override
  bool operator ==(covariant MyClass other) {
    if (identical(this, other)) return true;
  
    return 
      other.id == id &&
      other.value == value;
  }

  @override
  int get hashCode => id.hashCode ^ value.hashCode;
}

The toText() function allows parsing correctly any label from any T value. To perform a search, TextField uses the labeled result of the toText() function to lookup through the items.

Usage:

int? item = 0;

void openModalPicker() async {
    final result = await ModalPicker.modalPick<int>(
        context: context,
        label: 'Modal pick',
        list: List.generate(50, (index) => index),
        item: item,
        toText: (value) => 'Option $value',
    );
    if (result == null) return;
    item = result;
}

Showcase:

MiniPicker

The MiniPicker is as the name said, a tiny version of the picker to choose between a tiny number of items. It behaves the same way as the ModalPicker.

Usage:

MyClass? data;

void openMiniPicker() async {
    final result = await ModalPicker.miniPick<MyClass>(
        context: context,
        label: 'Mini pick',
        list: List.generate(
        50,
        (index) => MyClass(id: index, value: "Option $index"),
        ),
        item: data,
        toText: (value) => 'Option $value',
    );
    if (result == null) return;
    data = result;
}

Showcase:

TODO

• Unit & Integration test
• FilterPicker