diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e8af7c..3ace467 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,18 @@
+## [4.0.0] - 26/07/2025
+
+**Features**
+- Add filter for unpick or block some days [PR#150](https://github.com/koukibadr/Bottom-Picker/pull/150) [ISSUE#148](https://github.com/koukibadr/Bottom-Picker/issues/148)
+- Transform `pickerTitle` into an optional header builder callback [PR#146](https://github.com/koukibadr/Bottom-Picker/pull/146)
+- Add year picker [PR#153](https://github.com/koukibadr/Bottom-Picker/pull/153) [ISSUE#147](https://github.com/koukibadr/Bottom-Picker/issues/147)
+- Remove `pickerTextStyle` attribute [PR#146](https://github.com/koukibadr/Bottom-Picker/pull/146)
+- Add close on submit flag [ISSUE#139](https://github.com/koukibadr/Bottom-Picker/issues/139)
+- Refactor cupertino date enum using Flutter cupertino enum instead of custom enum
+- Add `diameterRatio` parameter for simple picker display [PR#154](https://github.com/koukibadr/Bottom-Picker/pull/154)
+
+**Bug Fix**
+- `selectedItemIndex` parameters does not work for simple picker
+- Resolve issue regarding `seleectedIndex` for Web and desktop platforms
+
## [3.2.1] - 05/06/2025
**Bug Fix**
diff --git a/README.md b/README.md
index 2a38d3e..570b805 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
-Bring beautiful bottom pickers to all your Flutter apps! Version 3.0.0 now supports desktop and web, alongside mobile.
+Bring beautiful bottom pickers to all your Flutter apps! Version 4.0.0 offer full customization alongside more advanced features for cupertino picker.
|  |  |
@@ -13,26 +13,38 @@
## Features
-- Simple list picker wheel
-- Date range picker (RTL and LTR)
-- Date picker
-- Month and year picker
-- Time picker
-- Duration Timer picker
-- Date and Time picker
-- 24h / 12h time format
-- Fully support Web and Desktop platforms (using wheel views)
-- Built-in themes
-- Customize confirm button
-- Customize first selected item
-- Enhanced tablet view
-- Customize background color
-- Customize date format order
-- Customize picker text style (color, font size, font weight...)
-- Customize close button style and display
-- Customize layout orientation (LTR / RTL )
-- Customizable bottom picker height
-- Customizable minuteInterval attribute
+### Core Picker Types
+
+* Simple list picker wheel
+* Date picker
+* Dedicated Year picker
+* Month and year picker
+* Date range picker (RTL and LTR)
+* Time picker
+* Duration Timer picker
+* Date and Time picker
+
+### Customization & Behavior
+
+* 24h / 12h time format support
+* Filter options for unpickable or blocked dates
+* Customizable header/title via an optional builder callback
+* Control auto-closing of the picker on submit
+* Customize confirm button
+* Customize first selected item
+* Customize background color
+* Customize date format order
+* Customize picker text style (color, font size, font weight, etc.)
+* Customize close button style and display
+* Customize layout orientation (LTR / RTL)
+* Customizable bottom picker height
+* Customizable `minuteInterval` attribute
+
+### Platform Support & Theming
+
+* Fully support Web and Desktop platforms (using wheel views)
+* Built-in themes
+* Enhanced tablet view
## Getting Started
@@ -40,25 +52,14 @@ To add bottom picker to your project add this line to your pubspec.yaml file
```yaml
dependencies:
- bottom_picker: ^3.2.1
+ bottom_picker: ^4.0.0
```
## Parameters
````dart
-/// Bottom picker title widget
- final Widget pickerTitle;
-
- ///Bottom picker description widget
- final Widget? pickerDescription;
-
- ///The padding applied on the title
- ///by default it is set with zero values
- final EdgeInsetsGeometry titlePadding;
-
- ///Title widget alignment inside the stack
- ///by default the title will be aligned left/right depends on `layoutOrientation`
- final Alignment? titleAlignment;
+ /// Renders the header component of the bottom picker
+ final Widget Function(BuildContext context)? headerBuilder;
///defines whether the bottom picker is dismissable or not
///by default it's set to false
@@ -87,10 +88,6 @@ dependencies:
/// it will return the selected value
late Function(dynamic)? onDismiss;
- ///Invoked when clicking on the close button
- ///
- final Function? onCloseButtonPressed;
-
///set the theme of the bottom picker (the button theme)
///possible values
///```
@@ -174,41 +171,22 @@ dependencies:
///date order applied on date picker or date time picker
///by default it's YYYY/MM/DD
- late DatePickerDateOrder? dateOrder;
+ DatePickerDateOrder? dateOrder;
- ///the picker text style applied on all types of bottom picker
- ///by default `TextStyle(fontSize: 14)`
- final TextStyle pickerTextStyle;
+ /// The picker theme data
+ final CupertinoTextThemeData? pickerThemeData;
///define the picker item extent available only for list items picker
///by default it's 35
late double itemExtent;
- ///indicate whether the close icon will be rendred or not
- /// by default `displayCloseIcon = true`
- final bool displayCloseIcon;
-
- /// Renders the close widget if it's null and [displayCloseIcon] is true
- /// the default close icon is rendered.
- /// Note if closeWidget is provided onClosePressed won't be triggered
- /// since you need to handle all actions on the provided widget.
- final Widget? closeWidget;
-
- ///the close icon color
- ///by default `closeIconColor = Colors.black`
- final Color closeIconColor;
-
- ///the close icon size
- ///by default `closeIconSize = 20`
- final double closeIconSize;
-
///the layout orientation of the bottom picker
///by default the orientation is set to LTR
///```
///LAYOUT_ORIENTATION.ltr,
///LAYOUT_ORIENTATION.rtl
///```
- final TextDirection layoutOrientation;
+ TextDirection? layoutOrientation;
///THe alignment of the bottom picker button
///by default it's `MainAxisAlignment.center`
@@ -309,13 +287,19 @@ dependencies:
/// Indicates whether the time seperator (":") will be shown or not.
bool showTimeSeparator = false;
-````
-
+ /// Indiacate whether the bottom picker will be closed (poped out of the Navigator)
+ /// when the submit button is pressed.
+ ///
+ /// By default closeOnSubmit = true.
+ bool? closeOnSubmit;
-**Migrate from 2.3.3 to 2.4.0:** `iconColor` , `buttonText` , `buttonTextStyle`, `displayButtonIcon`, `buttonTextAlignment` has been replaced with `buttonContent`, `buttonStyle` attributes to see the new attributes usage check the latest example in this documentation
+ /// The datepicker calendar type
+ List calendarDays = CupertinoDatePickerWidget.fullWeek;
-
+ /// The bottom picker selector diameter ratio.
+ final double diameterRatio;
+````
## Examples
@@ -323,281 +307,148 @@ dependencies:
```dart
BottomPicker(
- items: items,
- title: Text("Choose your country", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15)),
-).show(context);
-```
-
-
-
-### Date picker
-
-```dart
-BottomPicker.date(
- pickerTitle: Text(
- 'Set your Birthday',
- style: TextStyle(
- fontWeight: FontWeight.bold,
- fontSize: 15,
- color: Colors.blue,
+ items: items,
+ headerBuilder: (context) {
+ return Row(
+ children: [
+ Expanded(
+ child: Text(
+ 'Choose your country',
+ style: TextStyle(
+ fontWeight: FontWeight.bold,
+ fontSize: 15,
+ ),
+ ),
),
- ),
- dateOrder: DatePickerDateOrder.dmy,
- initialDateTime: DateTime(1996, 10, 22),
- maxDateTime: DateTime(1998),
- minDateTime: DateTime(1980),
- pickerTextStyle: TextStyle(
- color: Colors.blue,
- fontWeight: FontWeight.bold,
- fontSize: 12,
- ),
- onChange: (index) {
- print(index);
- },
- onSubmit: (index) {
- print(index);
- },
- bottomPickerTheme: BottomPickerTheme.plumPlate,
-).show(context);
-
-```
-
-
-
-### Time picker
-
-```dart
-
-BottomPicker.time(
- pickerTitle: Text(
- 'Set your next meeting time',
- style: TextStyle(
- fontWeight: FontWeight.bold,
- fontSize: 15,
- color: Colors.orange,
+ InkWell(
+ onTap: () {
+ Navigator.pop(context);
+ },
+ child: Icon(Icons.close),
),
- ),
- onSubmit: (index) {
- print(index);
- },
- onCloseButtonPressed: () {
- print('Picker closed');
- },
- bottomPickerTheme: BottomPickerTheme.orange,
- use24hFormat: true,
- initialTime: Time(
- minutes: 23,
- ),
- maxTime: Time(
- hours: 17,
- ),
- ).show(context);
-
-
-
-```
-
-
-
-### Duration Timer picker
-
-```dart
-
-BottomPicker.timer(
- pickerTitle: Text(
- 'Set your next meeting time',
- style: TextStyle(
- fontWeight: FontWeight.bold,
- fontSize: 15,
- color: Colors.orange,
- ),
- ),
- onChange: (p0) => print(p0),
- onSubmit: (index) {
- print(index);
+ ],
+ );
},
- initialTimerDuration: Duration(
- hours: 6,
- minutes: 30,
- ),
- timerPickerMode: CupertinoTimerPickerMode.hms,
).show(context);
```
-
-
-### Date & Time picker
+### DateTime picker
```dart
-BottomPicker.dateTime(
- pickerTitle: Text(
- 'Set the event exact time and date',
- style: TextStyle(
- fontWeight: FontWeight.bold,
- fontSize: 15,
- color: Colors.black,
+BottomPicker.date(
+ headerBuilder: (context) {
+ return Row(
+ children: [
+ Text(
+ 'Set your Birthday',
+ style: TextStyle(
+ fontWeight: FontWeight.bold,
+ fontSize: 15,
+ color: Colors.blue,
+ ),
),
- ),
- onSubmit: (date) {
- print(date);
- },
- onCloseButtonPressed: () {
- print('Picker closed');
- },
- minDateTime: DateTime(2021, 5, 1),
- maxDateTime: DateTime(2021, 8, 2),
- initialDateTime: DateTime(2021, 5, 1),
- gradientColors: [
- Color(0xfffdcbf1),
- Color(0xffe6dee9),
],
-).show(context);
-```
-
-
-
-### Date picker with only month and year
-
-```dart
-BottomPicker.monthYear(
- pickerTitle: Text(
- 'Set your Birth Month',
- ),
+ );
+ },
+ dateOrder: DatePickerDateOrder.dmy,
initialDateTime: DateTime(1996, 10, 22),
+ maxDateTime: DateTime(1998),
+ minDateTime: DateTime(1980),
onChange: (index) {
print(index);
},
+ onSubmit: (index) {
+ print(index);
+ },
+ onDismiss: (p0) {
+ print(p0);
+ },
+ bottomPickerTheme: BottomPickerTheme.plumPlate,
).show(context);
```
-
-
-### With custom picker text style
+### Year picker
```dart
-BottomPicker(
- items: [
- Center(
- child: Text('Leonardo DiCaprio'),
- ),
- Center(
- child: Text('Johnny Depp'),
- ),
- Center(
- child: Text('Robert De Niro'),
- ),
- Center(
- child: Text('Tom Hardy'),
- ),
- Center(
- child: Text('Ben Affleck'),
+BottomPicker.year(
+ headerBuilder: (context) {
+ return Row(
+ children: [
+ Text(
+ 'Set your Birthday Year',
+ style: TextStyle(
+ fontWeight: FontWeight.bold,
+ fontSize: 15,
+ color: Colors.blue,
+ ),
),
],
- pickerTitle: Text('Choose an actor'),
- titleAlignment: Alignment.center,
- pickerTextStyle: TextStyle(
- color: Colors.black,
- fontWeight: FontWeight.bold,
- ),
- closeIconColor: Colors.red,
+ );
+ },
+ initialDateTime: DateTime(1996),
+ maxDateTime: DateTime(1998),
+ minDateTime: DateTime(1980),
+ onChange: (index) {
+ print(index);
+ },
+ onSubmit: (index) {
+ print(index);
+ Navigator.pop(context);
+ },
+ onDismiss: (p0) {
+ print(p0);
+ },
+ bottomPickerTheme: BottomPickerTheme.plumPlate,
).show(context);
-
-
```
-
-
-
-
-
-
-
-
-### Range date picker
+### Custom days picker
```dart
-BottomPicker.range(
- pickerTitle: Text(
- 'Set date range',
- style: TextStyle(
- fontWeight: FontWeight.bold,
- fontSize: 15,
- color: Colors.black,
+BottomPicker.dateTime(
+ headerBuilder: (context) {
+ return Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Text(
+ 'Set the event exact time and date',
+ style: TextStyle(
+ fontWeight: FontWeight.bold,
+ fontSize: 15,
+ color: Colors.black,
+ ),
),
- ),
- pickerDescription: Text(
- 'Please select a first date and an end date',
- style: TextStyle(
- color: Colors.black,
+ InkWell(
+ onTap: () {
+ print('Picker closed');
+ Navigator.pop(context);
+ },
+ child: Text(
+ 'close',
+ style: TextStyle(
+ decoration: TextDecoration.underline,
+ ),
+ ),
),
- ),
- dateOrder: DatePickerDateOrder.dmy,
- minFirstDate: DateTime.now(),
- initialFirstDate: DateTime.now().add(Duration(days: 1)),
- pickerTextStyle: TextStyle(
- color: Colors.blue,
- fontWeight: FontWeight.bold,
- fontSize: 12,
- ),
- onRangeDateSubmitPressed: (firstDate, secondDate) {
- print(firstDate);
- print(secondDate);
- },
- bottomPickerTheme: BottomPickerTheme.plumPlate,
-).show(context);
-
-
-```
-
-
-
-### Time range picker
-
-```dart
-BottomPicker.rangeTime(
- pickerTitle: Text(
- 'Set Time range',
- style: TextStyle(
- fontWeight: FontWeight.bold,
- fontSize: 15,
- color: Colors.black,
- ),
- ),
- pickerDescription: Text(
- 'Please select a first time and an end time',
- style: TextStyle(
- color: Colors.black,
- ),
- ),
- pickerTextStyle: TextStyle(
- color: Colors.blue,
- fontWeight: FontWeight.bold,
- fontSize: 12,
- ),
- bottomPickerTheme: BottomPickerTheme.plumPlate,
- onRangeTimeSubmitPressed: (firstDate, secondDate) {
- print(firstDate);
- print(secondDate);
+ ],
+ );
+ },
+ onSubmit: (date) {
+ print(date);
},
+ calendarDays: CupertinoDatePickerWidget.workDays,
).show(context);
-
-
```
-
-
-
-
-
## Contributing
We warmly welcome contributions to the `bottom_picker` package! Your help in making it even better is highly appreciated.
**How you can contribute:**
-- **Found a bug?** Please [open a new issue](https://github.com/koukibadr/Bottom-Picker/issues/new?assignees=&labels=bug&template=bug_report.md&title=) with clear steps to reproduce the problem. The more detail you provide, the easier it will be to fix.
-- **Have a great idea for a new feature?** We'd love to hear it! Please [open a new issue](https://github.com/koukibadr/Bottom-Picker/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=) to discuss your suggestion. Explain the use case and how it would benefit users.
-- **Want to get your hands dirty and contribute code?** Fantastic! Here's how:
+* **Found a bug?** Please [open a new issue](https://github.com/koukibadr/Bottom-Picker/issues/new?assignees=&labels=bug&template=bug_report.md&title=) with clear steps to reproduce the problem. The more detail you provide, the easier it will be to fix.
+* **Have a great idea for a new feature?** We'd love to hear it! Please [open a new issue](https://github.com/koukibadr/Bottom-Picker/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=) to discuss your suggestion. Explain the use case and how it would benefit users.
+* **Want to get your hands dirty and contribute code?** Fantastic! Here's how:
1. Fork the [repository](https://github.com/koukibadr/Bottom-Picker).
2. Create a new branch for your feature or bug fix.
3. Make your changes, ensuring you follow the project's coding style and conventions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
index 605f1e1..82c655f 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -599,7 +599,6 @@ class ExampleApp extends StatelessWidget {
BuildContext context,
) {
BottomPicker.dateTime(
- minuteInterval: 2,
headerBuilder: (context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -630,13 +629,6 @@ class ExampleApp extends StatelessWidget {
onSubmit: (date) {
print(date);
},
- minDateTime: DateTime(2021, 5, 1),
- maxDateTime: DateTime(2021, 8, 2),
- initialDateTime: DateTime(2021, 5, 1),
- gradientColors: [
- Color(0xfffdcbf1),
- Color(0xffe6dee9),
- ],
calendarDays: CupertinoDatePickerWidget.workDays,
).show(context);
}
diff --git a/lib/cupertino/cupertino_date_picker.dart b/lib/cupertino/cupertino_date_picker.dart
index 4675383..2d06f40 100644
--- a/lib/cupertino/cupertino_date_picker.dart
+++ b/lib/cupertino/cupertino_date_picker.dart
@@ -490,7 +490,6 @@ class CupertinoDatePickerWidget extends StatefulWidget {
DateTime.friday,
];
-
@override
State createState() {
// ignore: no_logic_in_create_state, https://github.com/flutter/flutter/issues/70499
diff --git a/lib/widgets/time_picker.dart b/lib/widgets/time_picker.dart
index 9669366..077ef2f 100644
--- a/lib/widgets/time_picker.dart
+++ b/lib/widgets/time_picker.dart
@@ -27,9 +27,10 @@ class TimePicker extends StatelessWidget {
Widget build(BuildContext context) {
return CupertinoTheme(
data: CupertinoThemeData(
- textTheme: pickerThemeData ?? CupertinoTextThemeData(
- dateTimePickerTextStyle: textStyle,
- ),
+ textTheme: pickerThemeData ??
+ CupertinoTextThemeData(
+ dateTimePickerTextStyle: textStyle,
+ ),
),
child: CupertinoTimerPicker(
itemExtent: itemExtent,
diff --git a/pubspec.yaml b/pubspec.yaml
index 0ffc5e0..d376df7 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,6 +1,6 @@
name: bottom_picker
description: An easy way that let you create a bottom item picker or date & time picker with minmum parameters
-version: 3.2.1
+version: 4.0.0
homepage: 'https://github.com/koukibadr/Bottom-Picker'
environment:
sdk: '>=2.19.0 <4.0.0'