feat: [Picker] add autoOpen allow open panel auto when the widget i…

…s built.
bdlukaa · Sep 2, 2024 · e01cfbb · e01cfbb
1 parent 620b470
commit e01cfbb
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - feat: `NavigationAppBar` `leading` widget is now a minimum of `kCompactNavigationPaneWidth` width instead of being fixed to this width ([#1103](https://github.com/bdlukaa/fluent_ui/pull/1103))
 - feat: Add `TabView.stripBuilder` ([#1106](https://github.com/bdlukaa/fluent_ui/issues/1106))
+- feat: [Picker] add `autoOpen` allow open panel auto when the widget is built. ([#1112](https://github.com/bdlukaa/fluent_ui/pull/1112))
 
 ## 4.9.1
 

diff --git a/example/lib/screens/forms/date_picker.dart b/example/lib/screens/forms/date_picker.dart
@@ -13,6 +13,7 @@ class _DatePickerPageState extends State<DatePickerPage> with PageMixin {
   DateTime? simpleTime;
   DateTime? hiddenTime;
   DateTime? flexTime;
+  DateTime? autoOpenTime;
 
   bool showYear = true;
   bool showMonth = true;
@@ -124,6 +125,24 @@ DatePicker(
             ),
           ),
         ),
+        subtitle(content: const Text('A DatePicker with panel auto open.')),
+        CardHighlight(
+          codeSnippet: '''DateTime? selected;
+
+DatePicker(
+  selected: selected,
+  onChanged: (time) => setState(() => selected = time),
+  autoOpen: true,
+),''',
+          child: Align(
+            alignment: AlignmentDirectional.centerStart,
+            child: DatePicker(
+              selected: autoOpenTime,
+              onChanged: (v) => setState(() => autoOpenTime = v),
+              autoOpen: true,
+            ),
+          ),
+        ),
       ],
     );
   }

diff --git a/example/lib/screens/forms/time_picker.dart b/example/lib/screens/forms/time_picker.dart
@@ -13,6 +13,7 @@ class _TimePickerPageState extends State<TimePickerPage> with PageMixin {
   DateTime? simpleTime;
   DateTime? arrivalTime;
   DateTime? hhTime;
+  DateTime? autoOpenTime;
 
   @override
   Widget build(BuildContext context) {
@@ -93,6 +94,28 @@ TimePicker(
             ),
           ),
         ),
+        subtitle(
+          content: const Text(
+            'A TimePicker with panel auto open.',
+          ),
+        ),
+        CardHighlight(
+          codeSnippet: '''DateTime? selected;
+        
+TimePicker(
+  selected: selected,
+  onChanged: (time) => setState(() => selected = time),
+  autoOpen: true,
+),''',
+          child: Align(
+            alignment: AlignmentDirectional.centerStart,
+            child: TimePicker(
+              selected: autoOpenTime,
+              onChanged: (v) => setState(() => autoOpenTime = v),
+              autoOpen: true,
+            ),
+          ),
+        ),
       ],
     );
   }

diff --git a/lib/src/controls/form/pickers/date_picker.dart b/lib/src/controls/form/pickers/date_picker.dart
@@ -69,6 +69,7 @@ class DatePicker extends StatefulWidget {
     this.locale,
     this.fieldOrder,
     this.fieldFlex,
+    this.autoOpen = false,
   })  : startDate = startDate ?? DateTime.now().subtract(kYearDuration * 100),
         endDate = endDate ?? DateTime.now().add(kYearDuration * 25),
         assert(
@@ -168,6 +169,11 @@ class DatePicker extends StatefulWidget {
   ///   on the current locale
   final List<int>? fieldFlex;
 
+  /// When first loaded, automatically open the panel.
+  ///
+  /// Defaults to false
+  final bool autoOpen;
+
   @override
   State<DatePicker> createState() => _DatePickerState();
 
@@ -317,6 +323,7 @@ class _DatePickerState extends State<DatePicker> {
           fieldFlex: fieldFlex,
         );
       },
+      autoOpen: widget.autoOpen,
       pickerHeight: widget.popupHeight,
       child: (context, open) => HoverButton(
         autofocus: widget.autofocus,

diff --git a/lib/src/controls/form/pickers/pickers.dart b/lib/src/controls/form/pickers/pickers.dart
@@ -311,11 +311,13 @@ class Picker extends StatefulWidget {
     required this.child,
     required this.pickerContent,
     required this.pickerHeight,
+    this.autoOpen = false,
   });
 
   final PickerBuilder child;
   final WidgetBuilder pickerContent;
   final double pickerHeight;
+  final bool autoOpen;
 
   @override
   State<Picker> createState() => _PickerState();
@@ -324,6 +326,16 @@ class Picker extends StatefulWidget {
 class _PickerState extends State<Picker> {
   late final GlobalKey _childKey = GlobalKey(debugLabel: '${widget.child} key');
 
+  @override
+  void initState() {
+    super.initState();
+    if (widget.autoOpen) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        open();
+      });
+    }
+  }
+
   Future<void> open() {
     assert(
       _childKey.currentContext != null,

diff --git a/lib/src/controls/form/pickers/time_picker.dart b/lib/src/controls/form/pickers/time_picker.dart
@@ -50,6 +50,7 @@ class TimePicker extends StatefulWidget {
     this.autofocus = false,
     this.minuteIncrement = 1,
     this.locale,
+    this.autoOpen = false,
   });
 
   /// The current date selected date.
@@ -102,6 +103,11 @@ class TimePicker extends StatefulWidget {
   /// If null, the system locale will be used.
   final Locale? locale;
 
+  /// When first loaded, automatically open the panel.
+  ///
+  /// Defaults to false
+  final bool autoOpen;
+
   bool get use24Format => [HourFormat.HH, HourFormat.H].contains(hourFormat);
 
   @override
@@ -227,6 +233,7 @@ class _TimePickerState extends State<TimePicker>
           locale: locale,
         );
       },
+      autoOpen: widget.autoOpen,
       child: (context, open) => HoverButton(
         focusNode: widget.focusNode,
         autofocus: widget.autofocus,