diff --git a/example/lib/main.dart b/example/lib/main.dart index e3daa49..197dd73 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -147,16 +147,6 @@ class ExampleApp extends StatelessWidget { child: Text('Range Time Picker'), ), ), - SizedBox( - width: buttonWidth, - child: ElevatedButton( - onPressed: () { - _openArabicRangeDatePicker(context); - }, - child: - Text('Arabic Range Date Picker', textAlign: TextAlign.center), - ), - ), SizedBox( width: buttonWidth, child: ElevatedButton( @@ -184,33 +174,6 @@ class ExampleApp extends StatelessWidget { child: Text('Date and Time Picker', textAlign: TextAlign.center), ), ), - SizedBox( - width: buttonWidth, - child: ElevatedButton( - onPressed: () { - _openDateTimePickerWithCustomButton(context); - }, - child: Text( - 'Bottom picker with custom button', - textAlign: TextAlign.center, - ), - ), - ), - SizedBox( - width: buttonWidth, - child: ElevatedButton( - onPressed: () { - _openPickerWithCustomPickerTextStyle(context); - }, - child: Text( - 'Bottom picker with custom picker text style', - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 12, - ), - ), - ), - ), ], ), ); @@ -219,13 +182,27 @@ class ExampleApp extends StatelessWidget { void _openSimpleItemPicker(BuildContext context, List items) { BottomPicker( items: items, - pickerTitle: Text( - 'Choose your country', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - ), - ), + headerBuilder: (context) { + return Row( + children: [ + Expanded( + child: Text( + 'Choose your country', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15, + ), + ), + ), + InkWell( + onTap: () { + Navigator.pop(context); + }, + child: Icon(Icons.close), + ), + ], + ); + }, backgroundColor: Colors.yellow.withValues( alpha: 0.6, ), @@ -233,9 +210,6 @@ class ExampleApp extends StatelessWidget { onSubmit: (index) { print(index); }, - onCloseButtonPressed: () { - print('This message is displayed when close button is pressed'); - }, buttonAlignment: MainAxisAlignment.start, displaySubmitButton: false, dismissable: true, @@ -249,20 +223,33 @@ class ExampleApp extends StatelessWidget { BottomPicker( items: items, selectedItemIndex: 1, - pickerTitle: Text( - 'اختر بلدك', - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15), - ), - pickerDescription: Row( - mainAxisAlignment: MainAxisAlignment.end, - children: [ - Icon(Icons.flag), - Text( - 'اختر جنسيتك من القائمة الموجودة تحت', - textAlign: TextAlign.end, + headerBuilder: (context) { + return Container( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Choose country', + style: TextStyle( + fontWeight: FontWeight.bold, + ), + ), + Text('Select your country of origins'), + ], + ), + InkWell( + onTap: () { + Navigator.pop(context); + }, + child: Icon(Icons.close), + ), + ], ), - ], - ), + ); + }, onChange: (index) { print(index); }, @@ -274,21 +261,25 @@ class ExampleApp extends StatelessWidget { print(p0); }, bottomPickerTheme: BottomPickerTheme.morningSalad, - layoutOrientation: TextDirection.rtl, - closeOnSubmit: false, ).show(context); } void _openDatePicker(BuildContext context) { BottomPicker.date( - pickerTitle: Text( - 'Set your Birthday', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - color: Colors.blue, - ), - ), + headerBuilder: (context) { + return Row( + children: [ + Text( + 'Set your Birthday', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15, + color: Colors.blue, + ), + ), + ], + ); + }, dateOrder: DatePickerDateOrder.dmy, initialDateTime: DateTime(1996, 10, 22), maxDateTime: DateTime(1998), @@ -313,9 +304,20 @@ class ExampleApp extends StatelessWidget { void _openMonthYearPicker(BuildContext context) { BottomPicker.monthYear( - pickerTitle: Text( - 'Set your Birth Month', - ), + headerBuilder: (context) { + return Row( + children: [ + Text( + 'Set your Birth Month', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15, + color: Colors.blue, + ), + ), + ], + ); + }, initialDateTime: DateTime(1996, 10, 22), onChange: (index) { print(index); @@ -328,14 +330,20 @@ class ExampleApp extends StatelessWidget { void _openDatePickerWithButtonStyle(BuildContext context) { BottomPicker.date( - pickerTitle: Text( - 'Set your Birthday', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - color: Colors.blue, - ), - ), + headerBuilder: (context) { + return Row( + children: [ + Text( + 'Set your Birthday', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15, + color: Colors.blue, + ), + ), + ], + ); + }, dateOrder: DatePickerDateOrder.dmy, initialDateTime: DateTime(1996, 10, 22), maxDateTime: DateTime(1998), @@ -386,23 +394,29 @@ class ExampleApp extends StatelessWidget { void _openRangeDatePicker(BuildContext context) { BottomPicker.range( - pickerTitle: Text( - 'Set date range', - 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, - ), - ), + headerBuilder: (context) { + return Column( + children: [ + Text( + 'Set date range', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15, + color: Colors.black, + ), + ), + Text( + 'Please select a first date and an end date', + style: TextStyle( + color: Colors.black, + ), + ), + ], + ); + }, dateOrder: DatePickerDateOrder.dmy, initialSecondDate: DateTime.now().add(Duration(days: 230)), - itemExtent: 10, + itemExtent: 20, pickerTextStyle: TextStyle( color: Colors.blue, fontWeight: FontWeight.bold, @@ -422,20 +436,26 @@ class ExampleApp extends StatelessWidget { void _openRangeTimePicker(BuildContext context) { 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, - ), - ), + headerBuilder: (context) { + return Column( + children: [ + Text( + 'Set Time range', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15, + color: Colors.black, + ), + ), + Text( + 'Please select a first time and an end time', + style: TextStyle( + color: Colors.black, + ), + ), + ], + ); + }, pickerTextStyle: TextStyle( color: Colors.blue, fontWeight: FontWeight.bold, @@ -454,54 +474,39 @@ class ExampleApp extends StatelessWidget { ).show(context); } - void _openArabicRangeDatePicker(BuildContext context) { - BottomPicker.range( - pickerTitle: Text( - 'حدد النطاق الزمني', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - color: Colors.black, - ), - ), - pickerDescription: Text( - 'الرجاء تحديد أول تاريخ وتاريخ انتهاء', - style: TextStyle( - color: Colors.black, - ), - ), - dateOrder: DatePickerDateOrder.dmy, - layoutOrientation: TextDirection.rtl, - pickerTextStyle: TextStyle( - color: Colors.blue, - fontWeight: FontWeight.bold, - fontSize: 12, - ), - onRangeDateSubmitPressed: (firstDate, secondDate) { - print(firstDate); - print(secondDate); - }, - bottomPickerTheme: BottomPickerTheme.plumPlate, - ).show(context); - } - void _openTimePicker(BuildContext context) { BottomPicker.time( - pickerTitle: Text( - 'Set your next meeting time', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - color: Colors.orange, - ), - ), + headerBuilder: (context) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Set your next meeting time', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15, + color: Colors.black, + ), + ), + InkWell( + onTap: () { + print('Picker closed'); + Navigator.pop(context); + }, + child: Text( + 'close', + style: TextStyle( + decoration: TextDecoration.underline, + ), + ), + ), + ], + ); + }, use24hFormat: false, onSubmit: (index) { print(index); }, - onCloseButtonPressed: () { - print('Picker closed'); - }, bottomPickerTheme: BottomPickerTheme.orange, initialTime: Time( minutes: 23, @@ -514,14 +519,33 @@ class ExampleApp extends StatelessWidget { void _openTimerPicker(BuildContext context) { BottomPicker.timer( - pickerTitle: Text( - 'Set your next meeting time', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - color: Colors.orange, - ), - ), + headerBuilder: (context) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Set your next meeting time', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15, + color: Colors.black, + ), + ), + InkWell( + onTap: () { + print('Picker closed'); + Navigator.pop(context); + }, + child: Text( + 'close', + style: TextStyle( + decoration: TextDecoration.underline, + ), + ), + ), + ], + ); + }, onChange: (p0) => print(p0), onSubmit: (index) { print(index); @@ -530,9 +554,6 @@ class ExampleApp extends StatelessWidget { hours: 6, minutes: 30, ), - onCloseButtonPressed: () { - print('Picker closed'); - }, timerPickerMode: CupertinoTimerPickerMode.hms, ).show(context); } @@ -540,74 +561,43 @@ class ExampleApp extends StatelessWidget { void _openDateTimePicker(BuildContext context) { BottomPicker.dateTime( minuteInterval: 2, - pickerTitle: Text( - 'Set the event exact time and date', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - color: Colors.black, - ), - ), - onSubmit: (date) { - print(date); - }, - onCloseButtonPressed: () { - print('Picker closed'); + 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, + ), + ), + InkWell( + onTap: () { + print('Picker closed'); + Navigator.pop(context); + }, + child: Text( + 'close', + style: TextStyle( + decoration: TextDecoration.underline, + ), + ), + ), + ], + ); }, - minDateTime: DateTime(2021, 5, 1), - maxDateTime: DateTime(2021, 8, 2), - initialDateTime: DateTime(2021, 5, 1), - gradientColors: [ - Color(0xfffdcbf1), - Color(0xffe6dee9), - ], - ).show(context); - } - - void _openDateTimePickerWithCustomButton(BuildContext context) { - BottomPicker.dateTime( - pickerTitle: Text( - 'Set the event exact time and date', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - color: Colors.black, - ), - ), onSubmit: (date) { print(date); }, - onCloseButtonPressed: () { - print('Picker closed'); - }, - buttonSingleColor: Colors.pink, minDateTime: DateTime(2021, 5, 1), maxDateTime: DateTime(2021, 8, 2), + initialDateTime: DateTime(2021, 5, 1), gradientColors: [ Color(0xfffdcbf1), Color(0xffe6dee9), ], ).show(context); } - - void _openPickerWithCustomPickerTextStyle(BuildContext context) { - BottomPicker( - items: List.generate( - 20, - (i) => Center( - child: Text('Actor $i'), - ), - ), - pickerTitle: Text('Choose an actor'), - titleAlignment: Alignment.center, - pickerTextStyle: TextStyle( - color: Colors.black, - fontWeight: FontWeight.bold, - ), - onChange: (p0) { - print(p0); - }, - closeIconColor: Colors.red, - ).show(context); - } } diff --git a/lib/bottom_picker.dart b/lib/bottom_picker.dart index bcdea1b..73c3d2e 100644 --- a/lib/bottom_picker.dart +++ b/lib/bottom_picker.dart @@ -34,8 +34,8 @@ class BottomPicker extends StatefulWidget { BottomPicker({ super.key, - required this.pickerTitle, - this.pickerDescription, + @Deprecated('should use headerBuilder instead') this.pickerTitle, + @Deprecated('should use headerBuilder instead') this.pickerDescription, required this.items, this.titleAlignment, this.titlePadding = const EdgeInsets.all(0), @@ -43,7 +43,7 @@ class BottomPicker extends StatefulWidget { this.onChange, this.onSubmit, this.onDismiss, - this.onCloseButtonPressed, + @Deprecated('should use headerBuilder instead') this.onCloseButtonPressed, this.bottomPickerTheme = BottomPickerTheme.blue, this.gradientColors, this.selectedItemIndex = 0, @@ -56,9 +56,11 @@ class BottomPicker extends StatefulWidget { color: Colors.black, ), this.itemExtent = 35.0, + @Deprecated('should use headerBuilder instead') this.displayCloseIcon = true, + @Deprecated('should use headerBuilder instead') this.closeIconColor = Colors.black, - this.closeIconSize = 20, + @Deprecated('should use headerBuilder instead') this.closeIconSize = 20, this.layoutOrientation = TextDirection.ltr, this.buttonAlignment = MainAxisAlignment.center, this.height, @@ -66,8 +68,9 @@ class BottomPicker extends StatefulWidget { this.selectionOverlay, this.buttonContent, this.buttonStyle, - this.closeWidget, + @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, + this.headerBuilder, }) { dateOrder = null; onRangeDateSubmitPressed = null; @@ -81,15 +84,15 @@ class BottomPicker extends StatefulWidget { BottomPicker.date({ super.key, - required this.pickerTitle, - this.pickerDescription, + @Deprecated('should use headerBuilder instead') this.pickerTitle, + @Deprecated('should use headerBuilder instead') this.pickerDescription, this.titlePadding = const EdgeInsets.all(0), this.titleAlignment, this.dismissable = false, this.onChange, this.onSubmit, this.onDismiss, - this.onCloseButtonPressed, + @Deprecated('should use headerBuilder instead') this.onCloseButtonPressed, this.bottomPickerTheme = BottomPickerTheme.blue, this.gradientColors, this.initialDateTime, @@ -104,9 +107,11 @@ class BottomPicker extends StatefulWidget { fontSize: 14, color: Colors.black, ), + @Deprecated('should use headerBuilder instead') this.displayCloseIcon = true, + @Deprecated('should use headerBuilder instead') this.closeIconColor = Colors.black, - this.closeIconSize = 20, + @Deprecated('should use headerBuilder instead') this.closeIconSize = 20, this.layoutOrientation = TextDirection.ltr, this.buttonAlignment = MainAxisAlignment.center, this.height, @@ -114,8 +119,9 @@ class BottomPicker extends StatefulWidget { this.buttonContent, this.buttonStyle, this.itemExtent = 35.0, - this.closeWidget, + @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, + this.headerBuilder, }) { datePickerMode = CupertinoDatePickerMode.date; bottomPickerType = BottomPickerType.dateTime; @@ -126,15 +132,15 @@ class BottomPicker extends StatefulWidget { BottomPicker.monthYear({ super.key, - required this.pickerTitle, - this.pickerDescription, + @Deprecated('should use headerBuilder instead') this.pickerTitle, + @Deprecated('should use headerBuilder instead') this.pickerDescription, this.titlePadding = const EdgeInsets.all(0), this.titleAlignment, this.dismissable = false, this.onChange, this.onSubmit, this.onDismiss, - this.onCloseButtonPressed, + @Deprecated('should use headerBuilder instead') this.onCloseButtonPressed, this.bottomPickerTheme = BottomPickerTheme.blue, this.gradientColors, this.initialDateTime, @@ -148,9 +154,11 @@ class BottomPicker extends StatefulWidget { fontSize: 14, color: Colors.black, ), + @Deprecated('should use headerBuilder instead') this.displayCloseIcon = true, + @Deprecated('should use headerBuilder instead') this.closeIconColor = Colors.black, - this.closeIconSize = 20, + @Deprecated('should use headerBuilder instead') this.closeIconSize = 20, this.layoutOrientation = TextDirection.ltr, this.buttonAlignment = MainAxisAlignment.center, this.height, @@ -158,8 +166,9 @@ class BottomPicker extends StatefulWidget { this.buttonContent, this.buttonStyle, this.itemExtent = 35.0, - this.closeWidget, + @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, + this.headerBuilder, }) { datePickerMode = CupertinoDatePickerMode.monthYear; bottomPickerType = BottomPickerType.dateTime; @@ -171,15 +180,15 @@ class BottomPicker extends StatefulWidget { BottomPicker.dateTime({ super.key, - required this.pickerTitle, - this.pickerDescription, + @Deprecated('should use headerBuilder instead') this.pickerTitle, + @Deprecated('should use headerBuilder instead') this.pickerDescription, this.titlePadding = const EdgeInsets.all(0), this.titleAlignment, this.dismissable = false, this.onChange, this.onSubmit, this.onDismiss, - this.onCloseButtonPressed, + @Deprecated('should use headerBuilder instead') this.onCloseButtonPressed, this.bottomPickerTheme = BottomPickerTheme.blue, this.gradientColors, this.initialDateTime, @@ -196,9 +205,11 @@ class BottomPicker extends StatefulWidget { fontSize: 14, color: Colors.black, ), + @Deprecated('should use headerBuilder instead') this.displayCloseIcon = true, + @Deprecated('should use headerBuilder instead') this.closeIconColor = Colors.black, - this.closeIconSize = 20, + @Deprecated('should use headerBuilder instead') this.closeIconSize = 20, this.layoutOrientation = TextDirection.ltr, this.buttonAlignment = MainAxisAlignment.center, this.height, @@ -207,8 +218,9 @@ class BottomPicker extends StatefulWidget { this.buttonStyle, this.itemExtent = 30, this.showTimeSeparator = false, - this.closeWidget, + @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, + this.headerBuilder, }) { datePickerMode = CupertinoDatePickerMode.dateAndTime; bottomPickerType = BottomPickerType.dateTime; @@ -218,8 +230,8 @@ class BottomPicker extends StatefulWidget { BottomPicker.time({ super.key, - required this.pickerTitle, - this.pickerDescription, + @Deprecated('should use headerBuilder instead') this.pickerTitle, + @Deprecated('should use headerBuilder instead') this.pickerDescription, required this.initialTime, this.maxTime, this.minTime, @@ -229,7 +241,7 @@ class BottomPicker extends StatefulWidget { this.onChange, this.onSubmit, this.onDismiss, - this.onCloseButtonPressed, + @Deprecated('should use headerBuilder instead') this.onCloseButtonPressed, this.bottomPickerTheme = BottomPickerTheme.blue, this.gradientColors, this.minuteInterval = 1, @@ -242,9 +254,11 @@ class BottomPicker extends StatefulWidget { fontSize: 14, color: Colors.black, ), + @Deprecated('should use headerBuilder instead') this.displayCloseIcon = true, + @Deprecated('should use headerBuilder instead') this.closeIconColor = Colors.black, - this.closeIconSize = 20, + @Deprecated('should use headerBuilder instead') this.closeIconSize = 20, this.layoutOrientation = TextDirection.ltr, this.buttonAlignment = MainAxisAlignment.center, this.height, @@ -253,8 +267,9 @@ class BottomPicker extends StatefulWidget { this.buttonStyle, this.showTimeSeparator = false, this.itemExtent = 30, - this.closeWidget, + @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, + this.headerBuilder, }) { datePickerMode = CupertinoDatePickerMode.time; bottomPickerType = BottomPickerType.time; @@ -266,10 +281,10 @@ class BottomPicker extends StatefulWidget { BottomPicker.timer({ super.key, - required this.pickerTitle, + @Deprecated('should use headerBuilder instead') this.pickerTitle, this.timerPickerMode = CupertinoTimerPickerMode.hm, this.timerSecondsInterval = 1, - this.pickerDescription, + @Deprecated('should use headerBuilder instead') this.pickerDescription, this.initialTimerDuration, this.titlePadding = const EdgeInsets.all(0), this.titleAlignment, @@ -278,7 +293,7 @@ class BottomPicker extends StatefulWidget { this.onSubmit, this.onDismiss, this.itemExtent = 30, - this.onCloseButtonPressed, + @Deprecated('should use headerBuilder instead') this.onCloseButtonPressed, this.bottomPickerTheme = BottomPickerTheme.blue, this.gradientColors, this.minuteInterval = 1, @@ -290,17 +305,20 @@ class BottomPicker extends StatefulWidget { fontSize: 14, color: Colors.black, ), + @Deprecated('should use headerBuilder instead') this.displayCloseIcon = true, + @Deprecated('should use headerBuilder instead') this.closeIconColor = Colors.black, - this.closeIconSize = 20, + @Deprecated('should use headerBuilder instead') this.closeIconSize = 20, this.layoutOrientation = TextDirection.ltr, this.buttonAlignment = MainAxisAlignment.center, this.height, this.displaySubmitButton = true, this.buttonContent, this.buttonStyle, - this.closeWidget, + @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, + this.headerBuilder, }) { dateOrder = null; onRangeDateSubmitPressed = null; @@ -312,14 +330,14 @@ class BottomPicker extends StatefulWidget { BottomPicker.range({ super.key, - required this.pickerTitle, - this.pickerDescription, + @Deprecated('should use headerBuilder instead') this.pickerTitle, + @Deprecated('should use headerBuilder instead') this.pickerDescription, required this.onRangeDateSubmitPressed, this.onRangePickerDismissed, this.titlePadding = const EdgeInsets.all(0), this.titleAlignment, this.dismissable = false, - this.onCloseButtonPressed, + @Deprecated('should use headerBuilder instead') this.onCloseButtonPressed, this.bottomPickerTheme = BottomPickerTheme.blue, this.gradientColors, this.buttonPadding, @@ -330,9 +348,11 @@ class BottomPicker extends StatefulWidget { fontSize: 14, color: Colors.black, ), + @Deprecated('should use headerBuilder instead') this.displayCloseIcon = true, + @Deprecated('should use headerBuilder instead') this.closeIconColor = Colors.black, - this.closeIconSize = 20, + @Deprecated('should use headerBuilder instead') this.closeIconSize = 20, this.layoutOrientation = TextDirection.ltr, this.buttonAlignment = MainAxisAlignment.center, this.height, @@ -346,8 +366,9 @@ class BottomPicker extends StatefulWidget { this.buttonContent, this.buttonStyle, this.itemExtent = 30, - this.closeWidget, + @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, + this.headerBuilder, }) { datePickerMode = CupertinoDatePickerMode.date; bottomPickerType = BottomPickerType.rangeDate; @@ -373,15 +394,15 @@ class BottomPicker extends StatefulWidget { BottomPicker.rangeTime({ super.key, - required this.pickerTitle, - this.pickerDescription, + @Deprecated('should use headerBuilder instead') this.pickerTitle, + @Deprecated('should use headerBuilder instead') this.pickerDescription, required this.onRangeTimeSubmitPressed, this.onRangePickerDismissed, this.use24hFormat = true, this.titlePadding = const EdgeInsets.all(0), this.titleAlignment, this.dismissable = false, - this.onCloseButtonPressed, + @Deprecated('should use headerBuilder instead') this.onCloseButtonPressed, this.bottomPickerTheme = BottomPickerTheme.blue, this.gradientColors, this.buttonPadding, @@ -392,9 +413,11 @@ class BottomPicker extends StatefulWidget { fontSize: 14, color: Colors.black, ), + @Deprecated('should use headerBuilder instead') this.displayCloseIcon = true, + @Deprecated('should use headerBuilder instead') this.closeIconColor = Colors.black, - this.closeIconSize = 20, + @Deprecated('should use headerBuilder instead') this.closeIconSize = 20, this.layoutOrientation = TextDirection.ltr, this.buttonAlignment = MainAxisAlignment.center, this.height, @@ -409,8 +432,9 @@ class BottomPicker extends StatefulWidget { this.minuteInterval = 1, this.showTimeSeparator = false, this.itemExtent = 30, - this.closeWidget, + @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, + this.headerBuilder, }) { datePickerMode = CupertinoDatePickerMode.time; bottomPickerType = BottomPickerType.rangeTime; @@ -430,7 +454,10 @@ class BottomPicker extends StatefulWidget { } /// Bottom picker title widget - final Widget pickerTitle; + final Widget? pickerTitle; + + /// Renders the header component of the bottom picker + final Widget Function(BuildContext context)? headerBuilder; ///Bottom picker description widget final Widget? pickerDescription; @@ -815,8 +842,17 @@ class BottomPickerState extends State { padding: widget.titlePadding, child: Row( children: [ - Expanded(child: widget.pickerTitle), - if (widget.displayCloseIcon) + if (widget.headerBuilder != null) + Expanded( + child: widget.headerBuilder!( + context, + ), + ), + if (widget.headerBuilder == null && + widget.pickerTitle != null) + Expanded(child: widget.pickerTitle!), + if (widget.headerBuilder == null && + widget.displayCloseIcon) widget.closeWidget ?? CloseIcon( onPress: _closeBottomPicker, @@ -826,7 +862,8 @@ class BottomPickerState extends State { ], ), ), - if (widget.pickerDescription != null) + if (widget.headerBuilder == null && + widget.pickerDescription != null) widget.pickerDescription!, ], ), diff --git a/test/simple_bottom_picker_test.dart b/test/simple_bottom_picker_test.dart index d80dc73..aa16614 100644 --- a/test/simple_bottom_picker_test.dart +++ b/test/simple_bottom_picker_test.dart @@ -14,7 +14,9 @@ void main() { testWidgets('Simple use case: picker should function properly', (tester) async { var bottomPicker = BottomPicker( - pickerTitle: Text('Item picker'), + headerBuilder: (context) { + return Text('Item picker'); + }, items: items, ); await tester.pumpWidget( @@ -41,7 +43,9 @@ void main() { MaterialApp( home: Scaffold( body: BottomPicker( - pickerTitle: Text('Item picker'), + headerBuilder: (context) { + return Text('Item picker'); + }, items: items, onChange: (index) { itemIndex = index; @@ -84,7 +88,9 @@ void main() { MaterialApp( home: Scaffold( body: BottomPicker( - pickerTitle: Text('Item picker'), + headerBuilder: (context) { + return Text('Item picker'); + }, items: items, onSubmit: (p0) { index = p0; @@ -114,7 +120,9 @@ void main() { MaterialApp( home: Scaffold( body: BottomPicker( - pickerTitle: Text('Item picker'), + headerBuilder: (context) { + return Text('Item picker'); + }, items: items, onDismiss: (p0) { index = 9; @@ -145,12 +153,21 @@ void main() { MaterialApp( home: Scaffold( body: BottomPicker( - displayCloseIcon: true, - pickerTitle: Text('Item picker'), - items: items, - onCloseButtonPressed: () { - index = 9; + headerBuilder: (context) { + return Row( + children: [ + Text('Item picker'), + InkWell( + onTap: () { + Navigator.pop(context); + index = 9; + }, + child: Icon(Icons.close), + ), + ], + ); }, + items: items, ), ), ), @@ -174,9 +191,7 @@ void main() { MaterialApp( home: Scaffold( body: BottomPicker( - displayCloseIcon: false, displaySubmitButton: false, - pickerTitle: Text('Item picker'), items: items, ), ), @@ -193,7 +208,6 @@ void main() { () => MaterialApp( home: Scaffold( body: BottomPicker( - pickerTitle: Text('Item picker'), items: items, ), ), @@ -205,9 +219,7 @@ void main() { () => MaterialApp( home: Scaffold( body: BottomPicker( - displayCloseIcon: false, displaySubmitButton: false, - pickerTitle: Text('Item picker'), items: [], ), ), @@ -221,9 +233,7 @@ void main() { () => MaterialApp( home: Scaffold( body: BottomPicker( - displayCloseIcon: false, displaySubmitButton: false, - pickerTitle: Text('Item picker'), items: items, selectedItemIndex: 12, ), @@ -238,9 +248,7 @@ void main() { () => MaterialApp( home: Scaffold( body: BottomPicker( - displayCloseIcon: false, displaySubmitButton: false, - pickerTitle: Text('Item picker'), items: items, selectedItemIndex: -4, ),