0 purchases
Description:
uipickers
uipickers #
A plugin library that exposes platform specific date, time and picker popups. It uses the native iOS 14 UIKit UIDatePicker and SwiftUI like Picker on iOS and the corresponding material pickers on other platforms.
Usage #
First import it in your Dart code:
import 'package:uipickers/uipickers.dart';
copied to clipboard
Then select one of the following widgets:
AdaptiveDatePicker - Allows selecting a date or time and displays the selected date in a widget. The underlying popup is selected automatically based on the current platform.
AdaptivePicker - Allows selecting an item from a list of string items. The underlying popup is selected automatically based on the current platform.
UIDatePicker - Allows selecing a date, time, or time+date and uses a native iOS 14 style UIDatePicker component.
UIPicker - Allows selecting an item from a list of string items. Uses iOS native components (UIButton + UIMenu) to present SwiftUI like Picker popup.
MaterialDatePicker - Allows selecing a date, time, or time+date and uses the build-in material dialogs.
MaterialPicker - Allows selecing an item from a list of string items. Uses the build-in DropDownButton.
AdaptiveDatePicker #
The AdaptiveDatePicker is used for selecting a date or time. It displays the currently selected date/time in its widget. On iOS it will use a native iOS 14 style UIDatePicker. The initialDate property sets the currently selected date, firstDate is the earliest allowable date and lastDate is the latest allowable date. The onChanged event handler is called when the user selects an item from the popup:
DateTime selectedDate = DateTime.now();
//...
AdaptiveDatePicker(
initialDate: selectedDate,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(Duration(days: 10)),
onChanged: (date) { setState(() => selectedDate = date); },
)
copied to clipboard
Warning: The size of the widget should be constrained. For example it could be wrapped inside a SizedBox:
SizedBox(width: 150, height: 34,
child: AdaptiveDatePicker(
//...
)
)
copied to clipboard
In order to use the native version explicitly, just set the type property to cupertino, or replace AdaptiveDatePicker with UIDatePicker:
AdaptiveDatePicker(
type: AdaptiveDatePickerType.cupertino,
//...
)
copied to clipboard
The tintColor property is specific for UIDatePicker. It changes the highlighted text color:
UIDatePicker(
tintColor: UIColors.red,
//...
)
copied to clipboard
There are various attributes to customize, for example backgroundColor, cornerRadius, borderColor, etc.:
AdaptiveDatePicker(
backgroundColor: Colors.blue[50]!,
borderColor: Colors.blue[800]!,
borderWidth: 3,
cornerRadius: 4,
items: items,
value: selectedItem,
onChanged: (value) { setState(() => selectedItem = value); },
);
copied to clipboard
AdaptivePicker #
The AdaptivePicker widget allows automatic selection of the underlying widget implementation based on the operating system. On iOS it will use a SwiftUI like picker based on UIButton+UIMenu. The value property sets the currently selected item index, and the onChanged event handler is called when the user selects an item from the popup:
int selectedItem = 1;
var items = [ 'one', 'two', 'three' ];
//...
AdaptivePicker(
items: items,
value: selectedItem,
onChanged: (value) { setState(() => selectedItem = value); }
)
copied to clipboard
Warning: The size of the widget should be constrained. For example it could be wrapped inside a SizedBox:
SizedBox(width: 150, height: 34,
child: AdaptiveDatePicker(
//...
)
)
copied to clipboard
In order to use the native version explicitly, just set the type property to cupertino, or replace AdaptivePicker with UIPicker:
AdaptivePicker(
type: AdaptivePickerType.cupertino,
//...
)
copied to clipboard
There are various attributes to customize, for example backgroundColor, cornerRadius, borderColor, etc.:
UIPicker(
backgroundColor: Colors.blue[50]!,
borderColor: Colors.blue[800]!,
borderWidth: 3,
cornerRadius: 4,
items: items,
value: selectedItem,
onChanged: (value) { setState(() => selectedItem = value); },
);
copied to clipboard
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files In This Product:
Customer Reviews
There are no reviews.
