Description:

tie picker

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

Index #

Calendar
TimePicker
ModalPicker
MiniPicker

Using TiePicker #


Install


To support internationalization add the following to your MaterialApp


import 'package:tie_picker/tie_picker.dart';
copied to clipboard
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
],
);
copied to clipboard
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,
}
copied to clipboard
Usage:
date = await ModalPicker.datePicker(
context: context,
date: date,
mode: CalendarMode.day,
);

copied to clipboard
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,
);
}
copied to clipboard
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;
}

copied to clipboard
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;
}
copied to clipboard
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;
}
copied to clipboard
Showcase:

TODO #

❌ Unit & Integration test
✅ FilterPicker

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter