vincentderidder / flutter_uipickers

A flutter 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.

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';

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

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(
        //...
    )
)

In order to use the native version explicitly, just set the type property to cupertino, or replace AdaptiveDatePicker with UIDatePicker:

AdaptiveDatePicker(
    type: AdaptiveDatePickerType.cupertino,
    //...
)

The tintColor property is specific for UIDatePicker. It changes the highlighted text color:

UIDatePicker(
    tintColor: UIColors.red,
    //...
)

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

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); }
)

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(
        //...
    )
)

In order to use the native version explicitly, just set the type property to cupertino, or replace AdaptivePicker with UIPicker:

AdaptivePicker(
    type: AdaptivePickerType.cupertino,
    //...
)

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