[flutter_web] Form_showDateRangePicker

notes/flutter_web/lib/assets.g.dart

@@ -108,6 +108,7 @@ mixin AssetsMixin {
   final Asset lib_routes_notes_cheatsheets_widgets__examples_Spacer_Placeholder_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Spacer_Placeholder.dart');
   final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_ChoiceChip_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_ChoiceChip.dart');
   final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_Checkbox_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_Checkbox.dart');
+  final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_showDateRangePicker_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_showDateRangePicker.dart');
   final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_SliverAppBar_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_SliverAppBar.dart');
   final Asset lib_routes_notes_cheatsheets_widgets__examples_LayoutCore_ContainerCell_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/LayoutCore_ContainerCell.dart');
   final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_AppBar_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_AppBar.dart');

notes/flutter_web/lib/routes/notes/cheatsheets/widgets/_examples/Form_showDateRangePicker.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:you_flutter/state.dart';
+
+main() {
+  runApp(MaterialApp(home: Scaffold(body: Form_showDateRangePicker())));
+}
+
+// ignore: camel_case_types
+class Form_showDateRangePicker extends StatelessWidget {
+  Form_showDateRangePicker({super.key});
+
+  final Value<DateTimeRange?> dateRange = (null as DateTimeRange?).signal();
+
+  @override
+  Widget build(BuildContext context) {
+    return Watch(
+      builder: (context) {
+        return Column(
+          children: <Widget>[
+            Text("date: ${dateRange.value}"),
+            TextButton.icon(
+              onPressed: () async {
+                DateTimeRange? selected = await showDateRangePicker(
+                  context: context,
+                  firstDate: DateTime(DateTime.now().year - 1),
+                  lastDate: DateTime(DateTime.now().year + 1),
+                );
+                dateRange.value = selected;
+              },
+              icon: const Icon(Icons.date_range),
+              label: const Text('showDateRangePicker dialog'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

notes/flutter_web/lib/routes/notes/cheatsheets/widgets/page.dart

@@ -13,6 +13,7 @@ import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_Icon
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_InputChip.dart';
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_SearchAnchor.dart';
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_SegmentButton.dart';
+import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_showDateRangePicker.dart';
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/LayoutCore_ContainerCell.dart';
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Navigation_AppBar.dart';
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Navigation_BottomAppBar.dart';
@@ -69,8 +70,8 @@ void build(BuildContext context, Cell print) {
         FlutterExample(title: "ChoiceChip", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_ChoiceChip_dart, child: Form_ChoiceChip()),
         FlutterExample(title: "FilterChip", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_FilterChip_dart, child: Form_FilterChip()),
         FlutterExample(title: "InputChip", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_InputChip_dart, child: Form_InputChip()),
+        FlutterExample(title: "showDateRangePicker", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_showDateRangePicker_dart, child: Form_showDateRangePicker()),
         FlutterExample(title: "datePicker", child: buttonAndInput.datePicker()),
-        FlutterExample(title: "dateRangePicker", child: buttonAndInput.dateRangePicker()),
         FlutterExample(title: "timePicker", child: buttonAndInput.timePicker()),
         FlutterExample(title: "DropdownMenu", child: buttonAndInput.dropdownMenu()),
         FlutterExample(title: "Radio", child: buttonAndInput.radio()),
@@ -99,9 +100,6 @@ void build(BuildContext context, Cell print) {
 }
 
 class ButtonAndInput {
-
-
-
   Widget datePicker() {
     final Value<DateTime?> date = (null as DateTime?).signal();
     return Watch(
@@ -134,31 +132,6 @@ class ButtonAndInput {
     );
   }
 
-  Widget dateRangePicker() {
-    final Value<DateTimeRange?> dateRange = (null as DateTimeRange?).signal();
-    return Watch(
-      builder: (context) {
-        return Column(
-          children: <Widget>[
-            Text("date: ${dateRange.value}"),
-            TextButton.icon(
-              onPressed: () async {
-                DateTimeRange? selected = await showDateRangePicker(
-                  context: context,
-                  firstDate: DateTime(DateTime.now().year - 1),
-                  lastDate: DateTime(DateTime.now().year + 1),
-                );
-                dateRange.value = selected;
-              },
-              icon: const Icon(Icons.date_range),
-              label: const Text('showDateRangePicker dialog'),
-            ),
-          ],
-        );
-      },
-    );
-  }
-
   Widget timePicker() {
     final Value<TimeOfDay?> time = (null as TimeOfDay?).signal();
     return Watch(

notes/flutter_web/lib/routes/notes/note.md

@@ -277,7 +277,10 @@
 - Radio button: Radio、RadioListTile
 - Slider：Used to select from a range of values.
   - ref: <https://m3.material.io/components/sliders/overview>
-- CalendarDatePicker
+- **DateTime相关**
+  - **CalendarDatePicker** 日期选择器，较少使用，直接用`showDatePicker`
+  - **YearPicker** The year picker widget is rarely used directly. Instead, consider using [CalendarDatePicker], or [showDatePicker] which create full date pickers.
+  - **showDatePicker** 弹出日期选择器Dialog
 
 ### Text&信息&提示